【Vue】Vue2.0+Vue3.0学习笔记day09（TodoList案例完善）

目录

080.组件自定义事件_绑定

081.组件自定义事件_解绑

082.组件自定义事件_总结

083.TodoList案例_自定义事件

084.全局事件总线1

085.全局事件总线2

086.TodoList案例_事件总线

087.消息订阅与发布_pubsub

088.TodoList案例_pubsub

089.TodoList案例_编辑

090.TodoList案例_编辑_$nextTick

最终完善后的代码：

---

080.组件自定义事件_绑定

 

<template>
    <div class="app">
        <h1>{
  {msg}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName"/>

        <!-- 通过父组件给子组件绑定一个自定义实现：子给父传递数据(第一种写法，使用@或v-on) -->
        <Student v-on:xixiwai="getStudentName"/>

        <!-- 通过父组件给子组件绑定一个自定义实现：子给父传递数据(第二种写法，使用ref) -->
        <!-- <Student ref="student"/> -->
    </div>
</template>

<script>
    import Student from "./components/Student.vue";
    import School from "./components/School.vue";
    export default {
        name:'App',
        components:{
            School,
            Student
        },   
        data() {
            return {
                msg:'你好啊'
            }
        },    
        methods: {
            getSchoolName(name){
                console.log('App收到了学校名',name);
            },
            getStudentName(name,...params){
                console.log('App收到了学生名',name,params);
            }
        },
        // (第二种写法，使用ref)
       /*  mounted() {
            this.$refs.student.$on('xixiwai',this.getStudentName)
            // 只点击一次
            // this.$refs.student.$once('xixiwai',this.getStudentName)
        }, */
    }
</script>

<style>
.app{
    background-color: #ddd;
    padding: 5px;
}
</style>

<template>
    <div class="school">
        <h2>学校名称：{
  {name}}</h2>
        <h2>学校地址：{
  {address}}</h2>   
        <button @click="sendSchoolName">把学校名给App</button> 
    </div>
</template>

<script>
    export default {
        name:'School',
        props:['getSchoolName'],
        data(){
            return{
                name:'西西歪',
                address:'广州'
            }
        },
        methods: {
            sendSchoolName(){
                this.getSchoolName(this.name)
            }
        },
    }
</script>

/*lang的种类有css,less, scss等，css是默认的可以不写lang,用其他的要安装相应的依赖 */
<style lang="less" scoped>
   .school{
       background-color: red;
       padding: 5px;         
   } 
</style>

<template>
    <div class="student">
        <h2>学生姓名：{
  {name}}</h2>
        <h2>学生性别：{
  {sex}}</h2>  
        <button @click="sendStudentName">把学生名给APP</button>           
    </div>
</template>

<script>
    export default {
        name:'Student',
        data(){
            return{
                name:'张三',
                sex:'男',
            }
        },
        methods: {
            sendStudentName(){
                // 触发student组件实例身上的xixiwai事件
                this.$emit('xixiwai',this.name,66,123,88)
            }
        },        
    }
</script>

<style scoped>
.student{
    background-color: orange;
    padding: 5px; 
    margin-top: 30px;   
}
</style>

081.组件自定义事件_解绑

 在那个子组件绑定就在哪里解绑

<template>
    <div class="student">
        <h2>学生姓名：{
  {name}}</h2>
        <h2>学生性别：{
  {sex}}</h2>  
        <button @click="sendStudentName">把学生名给APP</button>    
        <button @click="unbind">解绑xixiwai事件</button>       
    </div>
</template>

<script>
    export default {
        name:'Student',
        data(){
            return{
                name:'张三',
                sex:'男',
            }
        },
        methods: {
            sendStudentName(){
                // 触发student组件实例身上的xixiwai事件
                this.$emit('xixiwai',this.name,66,123,88)
                this.$emit('demo')
            },
            unbind(){
                // // this.$off('xixiwai') //解绑一个自定义事件
                // this.$off(['xixiwai','demo']) //解绑多个自定义事件
                this.$off() //解绑所有自定义事件
            }
        },        
    }
</script>

 在App中多绑定一个事件

<Student v-on:xixiwai="getStudentName" @demo="m1"/>

082.组件自定义事件_总结

 

<template>
    <div class="app">
        <h1>{
  {msg}}，学生的姓名是：{
  {studentName}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName"/>

        <!-- 通过父组件给子组件绑定一个自定义实现：子给父传递数据(第一种写法，使用@或v-on) -->
        <Student v-on:xixiwai="getStudentName" @demo="m1" @click.native="show"/>

        <!-- 通过父组件给子组件绑定一个自定义实现：子给父传递数据(第二种写法，使用ref) -->
        <!-- <Student ref="student"/> -->
    </div>
</template>

<script>
    import Student from "./components/Student.vue";
    import School from "./components/School.vue";
    export default {
        name:'App',
        components:{
            School,
            Student
        },   
        data() {
            return {
                msg:'你好啊',
                studentName:''
            }
        },    
        methods: {
            getSchoolName(name){
                console.log('App收到了学校名',name);
            },
            getStudentName(name,...params){
                console.log('App收到了学生名',name,params);
                this.studentName = name
            },
            m1(){
                console.log('demo被触发了');
            },
            show(){
                alert(123)
            }
        },
        // (第二种写法，使用ref)
       /*  mounted() {
            this.$refs.student.$on('xixiwai',this.getStudentName)
            // 只点击一次
            // this.$refs.student.$once('xixiwai',this.getStudentName)
        }, */
    }
</script>

## 组件的自定义事件
   1.一种组件间的通信方式，适用于：子组件===>父组件
   2.使用场景：A是父组件，B是子组件,B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）
   3.绑定自定义事件：
       1 第一种方式，在父组件中：<Student v-on:xi="test"/> 或 <Student @xi="test"/> 
       2 第二种方式，在父组件中：<Student ref="xxx"/>  
                                  ....
                                  mouted(){this.$refs.xxx.$on('xi',this.test)}
       3 若想让自定义事件只触发一次，可以使用once修饰符，或$once方法
   4.触发自定义事件：this.$emit('xi',数据)
   5.解绑自定义事件：this.$off('xi')
   6.组件上也可以绑定原生DOM事件，需要使用native修饰符
   7.注意：通过this.$refs.xxx.$on('xi',回调)绑定自定义事件时，回调要么配置在methods中，
   要么用箭头函数，否则this指向会出问题