Vue2 - 23-03-27

组件的自定义事件

在父组件中定义自定义事件以及方法（父组件），然后子组件在需要的地方进行触发该事件，可以在第二个以后参数传入子组件的相关东西

触发事件之后调用的方法是父组件的方法，父组件给子组件绑定上的自定义事件，然后由子组件触发该事件，进而调用了父组件的方法

App.vue

<template>
<div>
  <h1 class="apph">{{msg}}</h1>
  <!-- 通过标签v-on的形式 -->
  <Student v-on:getStudentNameEvent="getStudentName"/>
  <hr>
  <!-- 使用ref+生命周期钩子进行绑定 -->
  <Student ref="student"/>
  <hr>
  <!-- 通过v-bind单向绑定进行传入，子组件props进行接收 -->
  <School :getSchoolName='getSchoolName'/>
</div>
</template>

<script>
import Student from "./components/Student.vue"
import School from "./components/School.vue"
export default {
    name:'App',
    components:{
        Student,
        School
    },
    data(){
      return {
        msg:'你好啊！'
      }
    },
    methods:{
      getSchoolName(name) {
        console.log('App得到了学校名称：'+name);
      },
      getStudentName(name){
        console.log('App得到了学生姓名：'+name);
      }
    },
    mounted(){
      this.$refs.student.$on('getStudentNameEvent', this.getStudentName)
    }
}
</script>
<style scoped>
  .apph{
    background-color: pink;
  }
</style>

Student.vue

<template>
  <div class="demo">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
    <button @click='sendStudentName'>点我发送学生名给父组件</button>
  </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
            name:'linzepore',
            age:21
        }
    },
    methods:{
        sendStudentName(){
            //触发tudent实例的zepoevent事件
            this.$emit('getStudentNameEvent',this.name)
        }
    }
}
</script>

<style scoped>
    .demo {
        background-color: gray;
    }
</style>

自定义组件的两种绑定方式：

• v-on/@ + 自定义事件名称
• 标签上加ref属性，在mounted钩子上调用获取的子组件，然后进行绑定，this.$refs + .ref属性值 + .$on / $once

ref属性忘了？

参考这篇文章：HERE

• ref 属性被用来给元素或子组件注册引用信息（id的替代者），相当于对页面元素或子组件标识，使用 ref 属性标识页面元素或子组件之后，被标识的元素或子组件会被所在的组件实例对象收集，挂载在所在组件实例对象的$ref属性上
• ref 属性应用在 html 标签元素上，获取的是对应的真实DOM元素；ref 属性应用在组件标签上，获取的是对应组件实例对象

还可以加上修饰符

this.$refs.student.$once('eventName',params) /
@eventName.once='methodsName'

注意事项

在父组件给子组件标签实例绑定的事件都会被视为自定义事件，如果定义为原生的，可以这样写@click.native

自定义事件在子组件的触发以及在父组件的接收

假如父组件给子组件绑定
v-on:eventA="getParams"，

子组件可以通过这种方式触发事件
this.$emit('eventA',param1,param2,param3,...)，

那么父组件可以通过定义这种方式进行接收：
getParams(a, ...params) {}

解绑自定义事件

this.$off('eventName')//解绑一个
this.$off(['eventName1','eventName2'])//解绑多个
this.off()//解绑所有

通过ref传递的时候，回调函数注意事项

通过ref绑定自定义事件的时候，回调函数要写成箭头函数，要么就得写在methods里，不应该写成普通函数（this的指向变成vc实例）