脚本宝典收集整理的这篇文章主要介绍了vue父组件怎么调用子组件的方法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
调用方法:1、在父组件中,通过ref直接调用子组件的方法;2、在父组件中,通过组件的“$emit”、“$on”方法来调用。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
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、$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.js教程》
以上就是vue父组件怎么调用子组件的方法的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的vue父组件怎么调用子组件的方法全部内容,希望文章能够帮你解决vue父组件怎么调用子组件的方法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。