vue 父组件中调用子组件的方法

Vue项目中如何在父组件中直接调用子组件的方法：

方案一：通过ref直接调用子组件的方法；

//父组件中<template><div><Button @click="handleClick">点击调用子组件方法</Button><Child ref="child"/></div>
</template>    <script>
import Child from './child';export default {methods: {handleClick() {this.$refs.child.sing();},},
}
</script>//子组件中<template><div>我是子组件</div>
</template>
<script>
export default {methods: {sing() {console.log('我是子组件的方法');},},
};
</script>

方案二：通过组件的emit、emit、emit、on方法；

//父组件中<template><div><Button @click="handleClick">点击调用子组件方法</Button><Child ref="child"/></div>
</template>    <script>
import Child from './child';export default {methods: {handleClick() {this.$refs.child.$emit("childmethod")    //子组件$on中的名字},},
}
</script>//子组件中<template><div>我是子组件</div>
</template>
<script>
export default {mounted() {this.$nextTick(function() {this.$on('childmethods', function() {console.log('我是子组件方法');});});},
};
</script>

vue 父组件中调用子组件的方法相关推荐

vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
vue父组件中调用子组件中的方法及vue父组件调用孙子组件的方法
一:通过ref直接调用子组件的方法: 子组件child.vue: <template><div>我是子组件</div> </template> < ...
vue父组件中调用子组件的方法
(1)通过ref直接调用子组件的方法 //父组件中<template><div><Button @click="handleClick">点击调 ...
react如何在父组件中调用子组件事件
父组件是如何使用子组件的事件的,下边数值累加的例子类组件将子组件的this传到父组件,给父组件添加一个属性,值为this,之后就可以通过父组件的属性调用子组件的事件了 import React,{ ...
vue父组件如何调用子组件里面的方法
在vue里,父组件要调用子组件里边定义的方法,可以通过ref属性来获取到子组件的方法并执行,下面直接贴上子组件和父组件的代码吧! 父组件代码: <template><div clas ...
vue 父刷新子_vue.js从父级中更新子组件数据
如何从父组件中更新子组件中的数据?我正在尝试从父级中更新autores属性,并让它更新子级数据.目前什么都没有发生,我认为我没有正确的数据链接.如果我将它作为数据添加到父组件中,那么当代码运行时,父组 ...
从父组件中获取子组件的值
父组件中获取子组件中的值(三种的方式) 1. this.$root.子组件中的值 2. this.$parent.子值 $parent是一级一级访问的,如果子组件多的话需要多个$parent3. &l ...
Layui父级页面调用子级页面方法
父级页面调用子级页面方法百度了一堆,没几个有用的,为避免以后会用到,在这记下笔记 layer.open({title : "xxxx",type : 2,content : Gl ...
vue中父组件怎么调用子组件
前言前段时间,写了个地址的控件,封装成了一个子组件,在其他页面共用. 原文地址:vue利用级联选择器实现全国省市区乡村五级菜单联动然后当时出现了个bug,也没有太注意,后来才发现的.就是重置不了地 ...

vue 父组件中调用子组件的方法

vue 父组件中调用子组件的方法相关推荐

最新文章

热门文章