Vue中的自定义事件(子向父传递数据)

一.DOM事件分析

- 原生DOM事件
  - 1.绑定事件监听
     如: div.onclick = () = > {}
    - 目标元素  div
    - 事件名称  click
    - 回调函数  ()=>{}
  - 2.调用事件(也称分发事件)
    - 当我们对目标元素进行相应的操作的时候,浏览器会自动的调用对应的事件
- vue自定义中的事件
  - 1.绑定事件监听
    - 用法: 比如:
      vm.$on("xxx",callback)
      解释:在Child标签当中绑定一个事件对象 fn , 事件名 xxx
  - 2.调用事件(分发事件)
    - 用法: 比如:
      vm.$emit("xxx",data)
      解释: 在当前组件中,调用(分发) xxx 事件,传入数据为data(data一般指event)
  - 3.解除事件
    - 用法:比如:
      vm.$off("xxx",callback)
- vue中自定义事件:
   - 一般用户子向父通讯 ==> 用来替代函数props来传递参数
   - 子向父传递数据

二.案例分析

• App组件(功能为father组件)

<template>
  <div>
    <!-- <Child @father="father"/> --> <!-- 2A. 方式一:给子组件添加绑定事件 -->
    <Child ref="fa"/><!-- 2B.给组件设置一个属性 -->
    <div>{{message}}</div>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  name: 'App',
  components:{
    Child
  },
  mounted() {
    // 2B.方式二.通过给子组件设置的属性找到该组件,然后再绑定事件
    this.$refs.fa.$on("father",this.father)
  },
  data(){
    return{
      message:"父组件中的数据"
    }
  },
  methods: {
    //1.定义一个事件
    father(value){
      this.message = this.message + value;
    }
  },
}
</script>
<style>
</style>

• 子组件

<template>
    <div>
        <button @click="sonAdd">子组件</button>
    </div>
</template>
<script>
export default {
  name: 'Child',
  methods: {
      sonAdd(){
          //3.调用自定义事件,并传递参数
          this.$emit("father","我是子组件中的数据")
      }
  },
}
</script>
<style>
</style>

• 案例效果图展示