介绍 & lt; template>
& lt; div id=癮pp"祝辞
& lt; !——父组件——比;
& lt;输入v模型=癿sg"/比;
v & lt;按钮:点击=皀otify"在广播事件& lt;/button>
& lt; !——子组件——比;
& lt;弹出ref=癱hild"祝辞& lt;/popup>
& lt;/div>
& lt;/template>
& lt; script>
从“进口弹出@/组件/popup";
出口默认{
名称:“app",
数据:函数(){
返回{
味精:““,
}；
},
组件:{
弹出,
},
方法:{
通知:函数(){
如果(this.msg.trim ()) {
美元。refs.child.parentMsg (this.msg);
}
},
},
}；
& lt;/script>
& lt; style>
#应用{
Helvetica字体类型:“Avenir", Arial,无衬线;
-webkit-font-smoothing:平滑;
-moz-osx-font-smoothing:灰度;
text-align:中心;
颜色:# 2 c3e50;
margin-top: 60 px;
}
& lt;/style> & lt; template>
& lt; div>
& lt; ul>
& lt;李v=跋頼essages"在父组件输入了:{{项}}& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/template>
& lt; style>
身体{
background - color: # ffffff;
}
& lt;/style>
& lt; script>
出口默认{
名称:“popup",
数据:函数(){
返回{
消息:[],
}；
},
方法:{
parentMsg:函数(味精){
this.messages.push(味精);
},
},
}；
& lt;/script>
今天就跟大家聊聊有关vue项目中如何实现在父组件点击按钮触发子组件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
我把这个实例分为几个步骤解读:
1,父组件的按钮元素绑定点击事件,该事件指向通知方法
2,给子组件注册一个ref=昂⒆印?br/> 3,父组件的通知的方法在处理时,使用了美元refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数味精
, 4,子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的味精放消息数到组中
父组件
子组件
看完上述内容,你们对vue项目中如何实现在父组件点击按钮触发子组件有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
