Vue 中 组件通信 - 子传父（自定义事件）
Vue 中 组件通信 - 子传父（自定义事件）子传父步骤：在子组件的 data 里面定义好 要传递的数据在子组件的模版里面正常使用 该数据（一般是通过一定的动作，如点击，滑动等，来自定义事件向父组件传递，这里以 click 为例）在子组件的 methods 里面 定义 this.$emit(‘itemclick’,item)，将 名字为 itemclick 的自定义事件传给父组件，item 是参数
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>