vue 父元素点击不触发子组件_详解vue中在父组件点击按钮触发子组件的事件

我把这个实例分为几个步骤解读：

1、父组件的button元素绑定click事件,该事件指向notify方法

2、给子组件注册一个ref=“child”

3、父组件的notify的方法在处理时，使用了$refs.child把事件传递给子组件的parentMsg方法，同时携带着父组件中的参数msg

4、子组件接收到父组件的事件后，调用了parentMsg方法，把接收到的msg放到message数组中

父组件

广播事件

import popup from "@/components/popup";

export default {

name: "app",

data: function () {

return {

msg: "",

};

},

components: {

popup,

},

methods: {

notify: function () {

if (this.msg.trim()) {

this.$refs.child.parentMsg(this.msg);

}

},

},

};

#app {

font-family: "Avenir", Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased