15-VUE的自定义事件

15-VUE的自定义事件

---

1.前言

Vue中需要父组件给子组件传递数据时，可以使用props属性使得子组件接收父组件传来的参数或者函数；当需要向从子组件传递数据给父组件时，可以使用父组件传递一个函数给子组件，当子组件接收到函数后，将需要的数据作为参数传入到这个函数中，父组件就可以接收到参数

<!-- App.vue  父组件 -->
<template>
  <div class="app">
    <h1>{{msg}},学生的姓名是：{{studentname}}</h1>
<!--  通过父组件给子组件传递函数类型的props实现：子给父传递数据  -->
    <MySchool :getschoolname="getschoolname"></MySchool>
  </div>
</template>

export default {
    name:'App',
    components: {MySchool},
    data(){
      return{
        msg:'你好啊！',
      }
    },
    methods:{
      getschoolname(value){
        console.log('拿到了学校名字：',value)
      },
    },
}

<!-- School.vue  子组件-->
<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="sendSchoolName">把学校名给App</button>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                name:'滑浪学校',
                address:'比奇堡',
            }
        },
        props:["getschoolname"],
        methods:{
          sendSchoolName(){
            this.getschoolname(this.name)
          }
        },
    }
</script>

除了使用这种父组件传递一个函数给子组件传递数据的方式，还可以使用自定义事件的方式

---

2.自定义事件

1)一种组件间通信的方式，适用于：子组件 ==> 父组件
2)使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
3)绑定自定义事件：
①.第一种方式，在父组件中：<Demo @atguigu=“test”/> 或 <Demo v-on:atguigu=“test”/>

<!-- 例子： -->
<!--  通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（使用@或者v-on）  -->
<!--  aiguigu是事件名，getstudentname是回调名  -->
<MyStudent v-on:aiguigu="getstudentname"></MyStudent>
<MyStudent @aiguigu="getstudentname"></MyStudent>

​ ②.第二种方式，在父组件中：

<Demo ref="demo"/>

<!-- 例子： -->
<MyStudent ref="student"/>

mounted(){
    	this.$refs.xxx.$on('atguigu',this.test)
}

<!-- 例子： -->
mounted() {
      //$on是监测事件，而不是绑定事件，当emit发起事件时候，则调用$on
      this.$refs.student.$on('aiguigu',this.getstudentname )  //$ref拿的是vc实例
}

使用这种ref属性绑定事件的方式可以设置定时器

setTimeout(()=>{
    this.$refs.student.$on('aiguigu',this.getstudentname )
},3000)

​ ③.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

<MyStudent @aiguigu.once="getstudentname"></MyStudent>

this.$refs.student.$once('aiguigu',this.getstudentname )

4).触发自定义事件：this.$emit(‘atguigu’,数据)

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

sendStudentName(){
      //触发Student组件实例身上的atguigu事件
      this.$emit('aiguigu',this.name)
    },

5).解绑自定义事件this.$off(‘atguigu’)

<button @click="unbind">解绑aiguigu事件</button>

unbind(){
      this.$off('aiguigu')  //解绑一个自定义事件
      // this.$off(['aiguigu','demo'])  //解绑多个自定义事件
      // this.$off()  //解绑所有的自定义事件
    },

6).组件上也可以绑定原生DOM事件，需要使用native修饰符。

<MyStudent ref="student" @click.native="show"/>

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

箭头函数在哪定义，this永远指向父级函数this，且this指向不可改变，即使作为属性添加到另一个对象上也是如此。普通函数作为方法添加到另一个对象上，this指向由调用者决定。作用域与this指向是分开的

//this指向错误
//这种写法的this不是vm（Vue实例），用了function就是指向student组件的实例，vue生命钩子的普通函数里面的this，指向的都是vm（Vue实例）
this.$refs.student.$on('aiguigu',function(name){
    console.log('拿到了学生名字',name);
    this.studentname=name;
})

需要使用箭头函数保持this指向触发事件的实例

mounted() {
    this.$refs.student.$on('aiguigu',(name)=>{
        console.log('拿到了学生名字',name);
        this.studentname=name;
    })
}