组件通信（自定义事件$emit）

根据视频整理，如果不能理解可以再看看视频: 视频链接

P36----组件通信方式2：自定义事件

主要使用this.$emit()

注意：
此方法只用于子组件向父组件发送消息（数据）
隔代组件或兄弟组件间通信此种方式不合适

此处假设一个场景：子组件有个按钮，点击去删除父组件的一个p标签

在子组件中，给按钮注册一个事件：

在父组件中：监听此自定义事件（浅黄色框里的名字），注意我的方框颜色是和上幅图一致的

父组件中注册事件（红色框）

拿到标签并且删除操作：上图绿色框

2. 也可以传参数
   在子组件中：传参数直接在事件名后面传
   

在父组件中接收：

规律：子组件中先定义一个操作去$emit，去父组件绑定相关监听
总的子组件EmitComponent.vue代码

<template>
  <div>
    <button @click='btnClick'>这里是子组件，点击去删除父组件的标签</button>
  </div>
</template>

<script>

export default {
  name: 'EmitComponent',
  methods: {
    btnClick () {
    // 告诉父组件，点击了按钮
      this.$emit('btnClick', {name: '姓名', age: 18})
    }
  }
}
</script>

<style>
</style>

总的父组件App.vue代码

<template>
  <div id="app">
    <EmitComponent @btnClick='deleteP' />
    <p ref='word'>这是父组件即将被删除的p标签</p>
  </div>
</template>

<script>
import EmitComponent from './components/EmitComponent'

export default {
  name: 'App',
  methods: {
    deleteP (data) {
      console.log(data)
      this.$refs.word.remove()
    }
  },
  components: {
    EmitComponent
  }
}
</script>

<style>
</style>