15 - Vue 学习笔记 - 父子组件通信子传父(自定义事件)、子传父的小问题

子传父(自定义事件)

有时候我们需要子组件传递给父组件一些信息，这个时候需要使用自定义事件来完成。

自定义事件流程：

• 在子组件中，通过 $emit() 来触发事件
• 在父组件中，通过 v-on 来监听子组件事件 （v-on 不仅能监听 DOM 事件，还可以监听自定义事件）

<!-- 父组件模板 -->
<div id="app">
	<!-- 监听子组件的事件	-->
	<cpn @item-click="cpnClick"></cpn>
</div>

<!-- 子组件模板  -->
<template id="cpn">
	<div>
		<button v-for="item in categories" @click="btnClick(item)">{
  {item.name}}</button>
	</div>
</template>

<script src="../js/vue.js"></script>
<script>
	const cpn = {
     
		template: `#cpn`,
		data() {
     
			return {
     
				categories: [
					{
     id: 'aaa', name: '热门推荐'},
					{
     id: 'bbb', name: '手机数码'},
					{
     id: 'ccc', name: '家用电器'},
					{
     id: 'ddd', name: