Vue2-组件自定义事件（实现子传父）

组件的自定义事件

1.一种组件间通信的方式，适用于： 子组件=>父组件

2.使用场景：

        A是父组件，B是子组件。
        B想给A传数据，那么就要在A中给B绑定自定义事件（事件回调在A中）

3.绑定自定义事件：

        ①在父组件中：

                        <B @zidingyi = 'fn'/> 或 <B v-on:zidingyi = 'fn'/>

4.触发自定义事件：

        在谁身上定义自定义事件，就在谁身上触发，所以我们现在要去B组件中触发。

        用this.$emit('zidingyi'，数据)

5.解绑自定义事件：

        用this.$off('zidingyi')

例子：

首先，我们创建脚手架，然后我的是这样的：

只需要在这三个文件中写就行。

父组件中的代码：

<template>
  <div>
    <h1>父组件</h1>
    <p>父组件名字：{
   
   {name}}</p>
    <p>父组件年龄：{
   
   {age}}</p>
    <p>接收子组件传过来的数据：{
   
   {JieShou}}</p>
    <hr>
    <ZiZuJian @zdy="hhh"></ZiZuJian>
  </div>
</template>

<script>
    import ZiZuJian from './Zizujian.vue'
export default {
    name:'FuZuJian',
    components:{ZiZuJian},
    data(){
        return{
            name:'父组件aa',
            age:'188',
            JieShou:'',
        }
    },
    methods:{
        hhh(val){
            this.JieShou = val
        }
    }
}
</script>

<style>

</style>

 大家可以看到，我在父组件中给子组件绑定了自定义事件（zdy）。

子组件中的代码：

<template>
  <div>
    <h1>子组件</h1>
    <p>子组件的爱好：{
   
   {hobby}}</p>
    <p>子组件的日常：{
   
   {dailylife}}</p>
    <button @click="chuanzhi">点击后，子传父</button>
  </div>
</template>

<script>
export default {
    name:'ZiZuJian',
    data(){
        return{
            hobby:'打球',
            dailylife:'看书'
        }
    },
    methods:{
        chuanzhi(){
            this.$emit('zdy',this.hobby)
        }
    }
}
</script>

<style>

</style>

我们上面说了，我们在谁身上绑定自定义事件，就要在谁身上触发，所以我们要在子组件中触发自定义事件，那么我这里用的是，点击一下按钮，触发方法chuanzhi，然后该方法中，去触发自定义事件zdy，然后并把想要传给父组件的值（this.hobby）传过去。

触发自定义事件zdy后，在父组件中，会调用hhh方法，然后该方法有一个参数val，我们把从子组件传过来的this.hobby的值传给val，然后通过this.JieShou = val得到子组件传过来的数据。

APP的代码：（下面是一个vue文件）

<template>
  <div>
            <FuZuJian></FuZuJian>
  </div>
</template>

<script>
  import FuZuJian from './components/FuZujian.vue'
  export default {
    name:'App',   //组件名
    components:{FuZuJian}
  }
</script>