Vue2.0学习—组件的自定义事件（五十八）

Posted 2022-11-23 王同学要努力

【Vue2.0学习】—组件的自定义事件（五十八）

组件的自定义事件

• 一种组件间通信的方式：适用于子组件—>父组件

• 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要A给B绑定自定义事件，事件的回调在A中

  绑定自定义事件：

• 第一种方式：在父组件中<Demo @stu="test"/>或<Demo v-on:stu="test"/>

  第二种方式：在父组件中：

   <Demo ref="demo"/>
     ……
     mounted()
        this.$refs.XXX.$on('stu',this.test)
     

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

  触发自定义事件：this.$emit('stu',数据)
  解绑自定义事件：this.$off('stu')

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

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

<template>
    <div class="container">
        <h1>msg</h1>
        <School :getSchoolName="getSchoolName" />
        <!-- 意思是说：给Student组件的实例对象vc身上绑定了一个事件,事件名字叫stu,有人触发了这个事件demo函数就会调用-->
        <!-- <Student v-on:stu="demo"/> -->
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子传父传递数据(使用@或者v-on) -->
        <!-- <Student v-on:stu="getName"/> -->
        <Student @stu="getName"/>
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据使用ref -->
        <!-- <Student ref="student"/> -->
        <!-- <Student @:stu="getName" @demo="m1" /> -->

    </div>

</template>

<script>
    import Student from './components/Student.vue'
    import School from './components/School.vue'
    export default 
        name: 'App',

        data() 
            return 
                msg: '你好鸭'
            
        ,
        components: 
            School,
            Student
        ,
        methods: 
            getSchoolName(name) 
                console.log('APP收到名字了', name)
            ,
            getName(name) 
                console.log('APP收到学生名字了', name)
                
            
            // m1() 
            //   console.log('demo事件触发了')
            // 
        ,
        mounted() 

            //    this.$refs.student.$on('stu',this.getName)
            //触发一次
            //    this.$refs.student.$once('stu',this.getName)

        
    
</script>

<style scoped>
    .container 
        background-color: pink;
        padding: 5px;
    
</style>

<template>
  <div class="box">
    <h2>学生姓名：name</h2>
    <h2>学生年龄：age</h2>
 <button @click="sendStudentName">把学生名给APP</button>
 <button @click="unbind">解绑学生事件</button>
 
 </div>
</template>

<script>
export default 
    name:'Student',
   
    data()
        return
            name:'王同学',
            age:20
        
    ,
    methods:
        sendStudentName()
            //触发Student身上的stu 事件
            this.$emit('stu',this.name)
        //   this.$emit('demo')
        ,
        
        unbind()
            //用于解绑一个事件
           this.$off('stu');//解绑一个事件
            //this.$off(['stu','demo'])//解绑多个事件
             // this.$off()//解绑所有的事件
        
    
   


</script>

<style scoped>
.box
    background-color: skyblue;


</style>