组件之间的通信之自定义事件

props用于父组件给子组件传递信息，在字组件中需要用props来接收数据

自定义事件用于子组件给父组件传递信息，在子组件当中需要用到$emit('自定义事件名称'，参数)来触发自定义事件。

例如：我需要把子组件里面的数据传递给父组件 在父组件中显示出来

1、在父组件在自定义事件 事件名为getName 在父组件中的回调也叫getName

<template>
  <div>
    <h1>我是父组件-------我儿子的名字叫{{name}}</h1>
    <Son @getName="getName"></Son>
  </div>
</template>

<script>
  import Son from './son.vue'
export default {
  name: 'Father',
  components:{
    Son
  },
  data () {
    return {
      name:''
    }
  },
  methods: { 
    getName(name){
      this.name = name
    }
  }
}
</script>

<style lang="less" scoped>
    
</style>

2、在子组件中将name的值传递给父组件  利用一个点击事件sendName来触发传递这个动作

在sendName中通过  this.$emit('getName',this.name) 触发自定义事件getName,并将当前组件中的name的值传递给父组件。

<template>
  <div>
    <h2>我是子组件</h2>
    <button @click="sendName">点击发送名字给父组件</button>
  </div>
</template>

<script>
export default {
  name: 'Son',
  data () {
    return {
      name:'小唐'
    }
  },
  methods: { 
    sendName(){
      this.$emit('getName',this.name)
    }
  }
}
</script>

<style lang="less" scoped>
    
</style>

3、在还没有触发自定义事件时运行结果截图 此时父组件中没有拿到name的值

 4、当我点击发送名字给父组件 父组件成功拿到了name的值