首页 > 其他 > 详细

vue如何在父组件中调用子组件的方法

时间:2019-11-18 18:51:47      阅读:617      评论:0      收藏:0      [点我收藏+]
 父组件
1
<template> 2 <div> 3 <child ref="mychild"></child> 4 <button @click="parentSetVal("这是新值")">点击</button> 5 </div> 6 </template> 7 <script> 8 import child from "./child" 9 exprot default(){ 10 components:{ 11 child 12 }, 13 methods:{ 14 parentSetVal(val){ 15 this.$refs.mychild.setVal(val) 16 } 17 } 18 } 19 </script>
 子组件
1
<template> 2 <div> 3 <p>{{val}}</p> 4 <button @click="setVal("这是值2")">点击</button> 5 </div> 6 </template> 7 <script> 8 exprot default(){ 9 data(){ 10 return { 11 val:"这是值1" 12 } 13 }, 14 methods:{ 15 setVal(val){ 16 this.val(val); 17 } 18 } 19 } 20 </script>

要点:
1.子组件需要已注册;
2.<child ref="myChild"></child>中mychild是子在父中的名字;
3.通过this.$refs.myChild.setVal()调用子组件的方法;

 

 

参考:https://www.cnblogs.com/gitByLegend/p/10868538.html

vue如何在父组件中调用子组件的方法

原文:https://www.cnblogs.com/yandeli/p/11884157.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!