[Vue]父子组件通信

1、子传父--自定义事件

主要理解一下父组件和子组件里面分别存在以下两个东西：

1、事件产生（如点击）

2、事件处理（methods）

画个图说明一下之间的关系是如何连接的：

<!--父组件模板-->
<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>

// 1.子组件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: 'aaa', name: '热门推荐'},
          {id: 'bbb', name: '手机数码'},
          {id: 'ccc', name: '家用家电'},
          {id: 'ddd', name: '电脑办公'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        // 子组件发射事件: 自定义事件
        this.$emit('item-click', item)
      }
    }
 }

 在页面上会展示四个button按钮

2、父传子 -- props