Vue 组件自定义事件（子组件向父组件传参）

组件自定义事件

子组件给父组件传参

1. 通过父组件给子组件传递函数类型的prop

   父组件提前准备一个函数，传给子组件，子组件调用函数

   父组件

   <template>
   	<div id="app">
           	<School :getSchoolName="getSchoolName"></School>
       </div>
   </template>
   <script>
   	import School from "./components/School"
       
       export default {
   		name:App,
           components:{School},
           methods:{
               getSchoolName(name){
                   console.log("App收到学校名", name)
               }
           }
       }
   </script>
   

   子组件

   <template>
   	<div>
           <h2 @click="sendName">学校名称</h2>
           <h2>学校地址</h2>
       </div>
   </template>
   
   <script>
   	export default {
           data(){
               return{
   				name:"清华"，
                   address:"北京"
               }
           },
           methods:{
               sendName(){
                   this.getSchoolName(this.name)
               }
           }
           props:["getSchoolName"]
       }
   </script>
   

2. 通过父组件给子组件绑定一个自定义事件实现

   子组件

   <template>
   	<div>
           <h2 @click="sendName">学校名称</h2>
           <h2>学校地址</h2>
       </div>
   </template>
   
   <script>
   	export default {
           data(){
               return{
   				name:"清华"，
                   address:"北京"
               }
           },
           methods:{
               sendName(){
                   this.$emit("doit", this.name)
               }
           }
       }
   </script>
   

   父组件（两种写法）

   一：

   <template>
   	<div id="app">
           	<School @doit="getSchoolName"></School>
       </div>
   </template>
   <script>
   	import School from "./components/School"
       
       export default {
   		name:App,
           components:{School},
           methods:{
               getSchoolName(name){
                   console.log("App收到学校名", name)
               }
           }
       }
   </script>
   

   子组件绑定一个事件，自定义事件：this.$emit("自定义事件名", 传递的数据)，父组件通过绑定子组件的自定义事件完成传参

   二：

   <template>
   	<div id="app">
           	<School ref="school"></School>
       </div>
   </template>
   <script>
   	import School from "./components/School"
       
       export default {
   		name:App,
           components:{School},
           methods: {
               getSchoolName(name) {
                 console.log("App收到学校名", name);
               }
             },
           mounted:{
               this.$refs.student.$on('sendName', this.getSchoolName)
           }
       }
   </script>
   

   父组件给子组件标签使用ref标记，在mounted生命周期函数中通过选择子组件的ref，$on表示当sendName子组件的事件发生的时候，父组件触发getSchoolName方法

解绑自定义事件

解绑当个自定义事件：this.$off(自定义事件名)

解绑多个自定义事件：this.$off([自定义事件名1,自定义事件名2])

注意点

组件上也可以绑定原生DOM元素，需要使用native修饰符

通过this.$refs.xxx.$on(自定义事件名, 回调函数)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题