vue中怎么通过父组件点击触发子组件事件
导读：本文共1179字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 父组件app.vue<template><divid="app"><!--父组件--><inputv-model="msg"><buttonv-on:click="notify">广播事件</button><!--子... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。父组件app.vue
<template><divid="app"><!--父组件--><inputv-model="msg"><buttonv-on:click="notify">广播事件</button><!--子组件--><popupref="child"></popup></div></template><script>importpopupfrom'@/components/popup'exportdefault{name:'app',data:function(){return{msg:''}},components:{popup},methods:{notify:function(){if(this.msg.trim()){this.$refs.child.parentMsg(this.msg)}}}}</script><style>#app{font-family:'Avenir',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}</style>子组件popup.vue
<template><div><ul><liv-for="iteminmessages">父组件输入了：{{item}}</li></ul></div></template><style>body{background-color:#ffffff;}</style><script>exportdefault{name:'popup',data:function(){return{messages:[]}},methods:{parentMsg:function(msg){this.messages.push(msg)}}}</script>我把这个实例分为几个步骤解读：
1、父组件的button元素绑定click事件,该事件指向notify方法
2、给子组件注册一个ref="child"
3、父组件的notify的方法在处理时，使用了$refs.child把事件传递给子组件的parentMsg方法，同时携带着父组件中的参数msg
4、子组件接收到父组件的事件后，调用了parentMsg方法，把接收到的msg放到message数组中
运行结果如下：
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
vue中怎么通过父组件点击触发子组件事件的详细内容，希望对您有所帮助，信息来源于网络。