vue子组件调用父组件事件的方法,vue父组件点击按钮弹窗组件

　　本文主要介绍vue中父组件点击按钮触发子组件的事件的详细说明。文章通过示例代码非常详细，对大家的学习或者工作都有一定的参考价值。下面让我们跟随边肖一起学习。

　　我用几个步骤来解释这个例子：

　　1.父组件的button元素与click事件绑定，该事件指向notify方法。

　　2.为子组件注册一个ref="child "。

　　3.处理父组件的notify方法时，使用$refs.child的parentMsg方法将事件传递给子组件，同时还携带父组件中的参数Msg。

　　4.子组件收到父组件的事件后，调用parentMsg方法，将收到的Msg放入消息数组中。

　　父组件

　　模板

　　div id=应用程序

　　！-父组件-

　　输入v-model=msg /

　　按钮v-on:click=notify 广播事件/按钮

　　！-子组件-

　　popup ref=child/popup

　　/div

　　/模板

　　脚本

　　从“@/components/popup”导入弹出式菜单；

　　导出默认值{

　　名称：“应用程序”，

　　数据：函数(){

　　返回{

　　消息： ，

　　};

　　},

　　组件：{

　　弹出菜单，

　　},

　　方法：{

　　通知：函数(){

　　if (this.msg.trim()) {

　　这个。$ refs . child . parent msg(this . msg)；

　　}

　　},

　　},

　　};

　　/脚本

　　风格

　　#app {

　　字体系列：“Avenir”，Helvetica，Arial，无衬线；

　　-webkit-font-smoothing:抗锯齿；

　　-moz-osx-font-smoothing:灰度；

　　文本对齐：居中；

　　颜色：# 2c3e50

　　边距-顶部：60px

　　}

　　/风格

　　组件

　　模板

　　差异

　　保险商实验所

　　Li-for=邮件中的项目输入的父组件：{{ item }}/li

　　/ul

　　/div

　　/模板

　　风格

　　正文{

　　背景色：# ffffff

　　}

　　/风格

　　脚本

　　导出默认值{

　　名称：弹出式菜单，

　　数据：函数(){

　　返回{

　　消息：[]，

　　};

　　},

　　方法：{

　　parentMsg:函数(消息){

　　this . messages . push(msg)；

　　},

　　},

　　};

　　/脚本

　　关于vue中父组件点击按钮触发子组件的事件的详细说明，本文到此结束。关于触发vue子组件的父组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。