Vue学习：Vue中的组件自定义事件

一般情况下，可以通过props实现父组件传递数据给子组件，通过vue的组件的自定义事件也可以实现子组件和父组件之间的通信。

通过使用$on(eventName) 监听事件，使用 $emit(eventName) 触发事件，$off(eventName)移出自定义事件监听器。

自定义组件传递数据的两种写法：

1、通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（使用@或v-on）：

父组件中接收参数：

<StudentName name="李四" sex="男" :age="18" v-on:atlrn="getStudentName"></StudentName>

getStudentName(name){

console.log("app收到了学生名",name);

}

子组件中传递参数：

<button @click="sendStudentName">把学生名给app</button>

 methods:{

            sendStudentName(){

                //$emit触发studentName组件实例身上的atlrn事件

                this.$emit('atlrn',this.name)

            }

        }

2、通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（使用ref）：

父组件中：

<StudentName  name="李四" sex="男" :age="18" ref="student"></StudentName>

mounted(){

    this.$refs.student.$on('atlrn',this.getStudentName)

  }

子组件中：

methods:{

            sendStudentName(){

                //$emit触发studentName组件实例身上的atlrn事件

                this.$emit('atlrn',this.name)

            }

        }

相较于第一种方式，第二种方式更灵活一些。

解绑自定义事件：

通过使用$off(eventName)解绑一个自定义事件。

当解绑多个自定义事件时，需要将两个自定义事件放入一个数组中，然后使用$off(【eventName1，eventName2】)解绑两个自定义事件。