Vue中的$emit的使用与注释

1.子组件

  Vue.component("son", {data() {return {msg: "我是子组件",tip:"我是经过子组件改变的父组件"//tip是要传给父组件的数据}},methods: {//这是写好的change方法change: function () {var sonMsg = this.tip //将tip数据赋值给sonMSgthis.$emit("changeSon", sonMsg)/*用$emit发送自定义的事件（changeSons是自定义事件，sonMsg是参数，也是子组件要传给父组件的值，用的是函数传参）*/}},template: `
{{msg}}
改变父组件
`,})
 

2.父组件

  Vue.component("father", {data() {return {msg: "我是父组件"}},methods: {/*定义好的方法，用来在父组件中把子组件传过来的值赋值给msg，来替换原本的值，这最后一步就完成了子组件对父组件的传值并且渲染到页面上 event也是$event*/changeFather: function (event) {// console.log(event);this.msg = event/*将传来的event，实际是tip的值赋值给父组件data中的msg*/}},template: `
{{msg}}
  
`,}),
 

3.完整代码(可直接运行)

4.组件层级结构图

5.效果图