Vue 中 组件通信 – 子传父（自定义事件）
子传父步骤：
在子组件的 data 里面定义好 要传递的数据
在子组件的模版里面正常使用 该数据
（一般是通过一定的动作，如点击，滑动等，来自定义事件向父组件传递，这里以 click 为例）
在子组件的 methods 里面 定义 this.$emit(‘itemclick’,item)，
将 名字为 itemclick 的自定义事件传给父组件，item 是参数
在父组件使用子组件的时候，利用 v-on ，将接收到的数据传递给自己的事件 @itemclick=“cpnclick”， 即 将 子组件的 itemclick 事件，转为了 自己的 cpnclick 事件，进行操作
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>Title</title></head><body><!– 子传父步骤： 1 在子组件的 data 里面定义好 要传递的数据 2 在子组件的模版里面正常使用 该数据 3 （一般是通过一定的动作，如点击，滑动等，来自定义事件向父组件传递，这里以 click 为例） 4 在子组件的 methods 里面 定义 this.$emit(‘itemclick’,item)， 将 名字为 itemclick 的自定义事件传给父组件，item 是参数 5 在父组件使用子组件的时候，利用 v-on ，将接收到的数据传递给自己的事件 @itemclick=”cpnclick” 即 将 子组件的 itemclick 事件，转为了 自己的 cpnclick 事件，进行操作–><div id=”app”> <!– 在这接收 子组件传过来的事件–> <cpn @itemclick=”cpnclick”></cpn></div><!–子组件模版–><template id=”cpn”> <div> <button v-for=”item in categories” @click=”itemClick(item)”>{{item.name}}</button> </div></template><script src=”../../JS/vue.js”></script><script> // 子组件 const cpn = { template: ‘#cpn’, data() { return { categories: [ {id: 0, name: ‘a’}, {id: 1, name: ‘b’}, {id: 2, name: ‘c’}, {id: 3, name: ‘d’}, ] } }, methods: { itemClick(item) { // 通过 $emit 来向父组件发射事件（信息）,自定义事件 this.$emit(‘itemclick’, item) } } } // 父组件 const app = new Vue({ el: ‘#app’, data: { message: ‘你好呀’ }, components: { cpn }, methods: { cpnclick(item) { console.log(‘cpnclick’, item) } } })</script></body></html> 40156625
