43vue组件的自定义事件

组件的自定义事件

总结：组件的自定义事件

1.一种组件间通信的方式,适用于: 子组件 ==> 父组件

2.使用场景: 子想给父传数据,那么就要在父中给子绑定自定义事件（事件的回调在父中)。

3.绑定自定义事件:

1. 第一种方式，在父组件中:<Demo @redskaber="test"/>或<Demo v-on:redskaber="test"/>

2. 第二种方式，在父组件中:

   <Demo ref="test"/>
       .....
    
    mounted(){
        // this.$refs.XXX.$on('redskaber',()=>{});
        this.$refs.XXX.$on('redskaber',this.test);
    }
   

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

4.触发自定义事件: this.$emit('redskaber',data)

5.解绑自定义事件this.$off('redskaber')

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

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

1.组件自定义事件-绑定

重要！！！： 你给谁绑定的自定义事件，你就找谁触发自定义事件。

        要求： 子组件向父组件发送name的值。
            - 1.props: 父组件先向子组件发送方法，子组件props。
            - 2.v-bind:XXX="func": 子组件VueComponet实例-绑定-自定义组件事件
            - 3.ref: 父组件通过ref标记子组件

App

<template>
    <div class="demo">
        <h3>{{msg}}</h3>
        <School name="alex" sex="male" :age="18" :getSchoolName="getSchoolName"  />   <!-- 1.props -->
        <Student name="Redskaber" sex="male" :age="18" v-on:bevent.once="getStudentName"/>  <!-- 2.@XXX或v-on:XXX -->
        <Teacher name="Teacher" sex="male" :age="28" ref="teacher"/> 
    </div>
</template>

<script>

    import School from './components/School';   
    import Student from './components/Student';        
    import Teacher from './components/Teacher';        
    export default {
        name:'App',
        components: {School,Student,Teacher},
        data() {
            return {
                msg:'hello Up'
            }
        },
        methods:{
            getSchoolName(name){
                console.log("App的getSchoolName被调用了，获取：", name)
            },
            getStudentName(name){
                console.log("App的getStudentName被调用了，获取：", name)
            }
        },
        mounted(){
            // on(event, function(){})
            // 通过 ref 属性将组件标记，将Teacher组件加入App组件的$refs属性中，从而获取到Teahcer组件中的值。
            setTimeout(()=>{
                this.$refs.teacher.$once('bevent',(name,...params) => console.log("App mounted 中直接获取组件实例对象，对其进行操作：",name,...params,params))
            },3000)
            // 此方法的粒度更高，如果需求细，则推荐使用此方法
            // ...params: 表示*args：  Welcome 100
            // params: [*args]：['Welcome', 100]
        }
    }
</script>

School

<template>
    <div class="school">
        <h3>SchoolName:{{name}}</h3>
        <h3>SchoolSex:{{sex}}</h3>
        <h3>SchoolAge:{{age}}</h3>
        <button @click="sendSchoolName">点我向父组件发送name</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
                title:"Welcome to Your Vue.js App",
            }
        },
        props:['name','sex','age','getSchoolName'],
        methods:{
            sendSchoolName(){
                this.getSchoolName(this.name)
            }
        }
    }
</script>

Student

<template>
    <div class="student">
        <h3>StudentName:{{name}}</h3>
        <h3>StudentSex:{{sex}}</h3>
        <h3 class="title">StudentAge:{{age}}</h3>
        <button @click="sendStudentName">点我向父组件发送name</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                title:"Welcome to Your Vue.js App",
                flag:100,
            }
        },
        props:['name','sex','age'],
        methods:{
            sendStudentName(){
                // event,params
                this.$emit('bevent',this.name)  // 当触发bevent事件时，父组件就会调用getStudentName方法
            }
        }
    }
</script>

Teacher

<template>
    <div class="teacher">
        <h3>StudentName:{{name}}</h3>
        <h3>StudentSex:{{sex}}</h3>
        <h3 class="title">StudentAge:{{age}}</h3>
        <button @click="sendTeacherName">点我向父组件发送name</button>
    </div>
</template>

<script>
    export default {
        name:'Teacher',
        data() {
            return {
                title:"Welcome to Your Vue.js App",
                flag:100,
            }
        },
        props:['name','sex','age'],
        methods:{
            sendTeacherName(){
                this.$emit('bevent',this.name, this.title, this.flag)
            }
        }
    }
</script>

2.组件自定义事件-解绑

重要！！！ ： 你给谁绑定的自定义事件，你就找谁解绑自定义事件。

	- 解绑组件自定义事件
	    - $off
                - this.$off('event')			// 解绑this组件的单个event自定义事件
                - this.$off(['event1','event2',...])	// 解绑this组件的多个event自定义事件
  	        - this.$off()				// 解绑this组件的所有自定义事件
	    - $Destroy
                - 移除组件及子组件事件监听（wacther）
                - 销毁组件及子组件(children component)
                - 销毁组件及子组件自定义事件(event listeners)

ps: 后还有路由...