Vue 父组件如何触发子组件中的方法

子组件

<template><div>child</div>
</template><script>export default {name: "child",props: "someprops",methods: {parentHandleclick(e) {console.log(e)}}}
</script>

父组件

<template><div><button @click="clickParent">点击</button><child ref="mychild"></child></div>
</template><script>import Child from './child';export default {name: "parent",components: {child: Child},methods: {// this.$refs.mychild.parentHandleclick("")clickParent() {this.$refs.mychild.parentHandleclick("我是父组件点击触发的");}}}
</script>

1. 首先父组件导入子组件并且在 components 中定义子组件

2. 引用子组件，并定义ref，用于 this.$refs.mychild 调用

3. 调用子组件的方法（parentHandleclick() 为子组件的方法）

注：在调用子组件的方法时（this.$refs.mychild.parentHandleclick()方法），出现了parentHandleclick未定义的异常

这个问题出现是因为我没有得到子组件的实例，所以调用的时候出现了undefined异常。子组件没有在页面初始化时加载，而是在点击某个特定的按钮后才开始显示加载。

子组件初始化的后就立马执行调用子组件的方法，可能他还没有初始化完成，所以出现了 undefined 的异常。

所以在调用子组件方法时，稍做一下延时处理：

setTimeout(() => {this.$refs.mychild.parentHandleclick()
}, 10)

Vue 父组件如何触发子组件中的方法相关推荐

vue怎么调用子元素的方法_vue.js 父组件如何触发子组件中的方法
文章目录组件组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能 ...
vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
vue父组件变量传递子组件_Vue2.x中的父组件数据传递至子组件
父组件结构 template :girls="aGirls"> script import vGirlGroup from './GirlGroup' export defa ...
vue中使用ts后，父组件获取执行子组件方法报错问题
一.问题产生背景: 子组件的一个方法: update () {this.$nextTick(() => {this.ul_slots.forEach((ul, cur_slots_index) ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header" 2. 在父组件中通过this.$refs.header.属性,调用子组件的属性 ...
Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>// 创建 Vue 实例,得到 ViewModelvar vm = new ...
5.VUE简单的组件间传值【父组件向子组件传值；子组件向父组件传值】
父组件向子组件传值父组件使用子组件时通过v-bind:变量的形式将对应的值传给todo-item子组件子组件通过props接收从父组件传来的content参数子组件向父组件传值数据在父组件中 ...
【vue报错】【子组件改变父组件数据】 Avoid mutating a prop directly since
[vue报错] Avoid mutating a prop directly since the value will be overwritten whenever the parent compo ...

Vue 父组件如何触发子组件中的方法

Vue 父组件如何触发子组件中的方法相关推荐

最新文章

热门文章