Vue 组件间通信方式:自定义事件

前言

前期分享的测试开发系列!Vue 组件间通信方式汇总,总有一款适合你( 5分钟教程-附项目实战案例 )中介绍了 3 种组件间的通信方法,分别是:

  • props
  • 全局事件总线
  • 消息订阅与发布

今天给大家分享第 4 种组件间的通信方法:自定义事件

适用于:子组件给父组件传递数据

使用方法

例如:Student.vue组件是School.vue组件的子组件, 子组件Student.vue想要将学生姓名传递给父组件School.vue

第1种方法:ref标识

School.vue组件内容如下

<template>
   <div>
       <h1>学生姓名是:{{studentName}}</h1>
        <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(1种写法:使用ref) -->
       <Student ref="student" @click.native="show"/>
   </div>
</template>
<script>
   import Student from "./components/Student"

   export default {
       name:'School',
       components:{Student},
       data(){
           return {
               studentName:''
           }
       },
       methods: {
           getStudentName(name,...params){
           //使用name形参接收Student组件中传递过来的实参name,...params用于接收剩余的参数
               this.studentName = name
           }
       },
       mounted() {
           //先在methods中准备好getStudentName方法
           this.$refs.student.$on('studentName', this.getStudentName) //绑定自定义事件,指定回调函数为getStudentName
   }
}
</script>

Student.vue组件内容如下

<template>
   <div>
       <button @click="sendStudentName">发送学生名给School组件</button>
   </div>
</template>
<script>
   export default {
       name:'Student',
       data() {
           return {
               name: '刘浩'
           }
       },
       methods: {
           sendStudentName(){
               //触发School组件实例身上的studentName事件,把学生名给School组件,再传递2个额外的参数:666,777
               this.$emit('studentName', this.name, 666, 777)
           }
       }
   }
</script>

第2种方法:v-on或@

School.vue组件内容如下

<template>
   <div>
       <h1>学生姓名是:{{studentName}}</h1>
        <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(2种写法:使用@或v-on) -->
       <Student v-on:studentName="getStudentName"/>
       <!-- 简写形式 -->
       <!--<Student @studentName="getStudentName"/>-->
   </div>
</template>
<script>
   import Student from "./components/Student"

   export default {
       name:'School',
       components:{Student},
       data(){
           return {
               studentName:''
           }
       },
       methods: {
           getStudentName(name,...params){
           //使用name形参接收Student组件中传递过来的实参name,...params用于接收剩余的参数
               this.studentName = name
           }
       }
}
</script>

Student.vue组件内容如下

<template>
   <div>
       <button @click="sendStudentName">发送学生名给School组件</button>
   </div>
</template>
<script>
   export default {
       name:'Student',
       data() {
           return {
               name: '刘浩'
           }
       },
       methods: {
           sendStudentName(){
               //触发School组件实例身上的studentName事件,把学生名给School组件,再传递2个额外的参数:666,777
               this.$emit('studentName', this.name, 666, 777)
           }
       }
   }
</script>

项目实战

在 200行纯前端Vue代码!教你写一个专属TodoList【零基础友好】
项目实战案例中,使用的props组件间通信方式,这种通信方式有一些不足之处。

在测试开发系列!Vue 组件间通信方式汇总,总有一款适合你( 5分钟教程-附项目实战案例 )一文中有详细描述该种通信方式的不足之处,同时也介绍了其他 2 种组件间通信方式,不妨点开链接重新温习一下。

今天介绍的自定义事件的组件间通信方式的 2 种写法,可以很好的替换 todoList案例中所使用的通信方式。

父组件:App.vue组件内容如下

<template>
 <div>
   <ListFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
 </div>
</template>
<script>
   import ListFooter from "./components/ListFooter"

   export default {
       name:'App',
       components:{ListFooter},
       data(){
           return {
               //由于todos是ListHeader组件和ListFooter组件都在使用,所以放在App中(状态提升)
               todos:JSON.parse(localStorage.getItem('todos')) || []
           }
       },
       methods: {
           //清除所有已经完成的todo
           clearAllTodo(){
               this.todos = this.todos.filter((todo)=>{
                   return !todo.done
               })
          }
       }
   }
</script>

这里的App.vue组件就是父组件,ListFooter.vue组件是子组件,以clearAllTodo自定义事件为例。

使用的是第2种方法:v-on的简写形式@clearAllTodo=“clearAllTodo”,@后的clearAllTodo是自定义事件名称。

子组件ListFooter.vue在传递数据时只需要触发这个事件名称就可以传递数据给父组件App.vue=后的clearAllTodomethods 回调函数的名称。

子组件:ListFooter.vue组件内容如下

<template>
   <div>
       <button @click="clearAll">清除已完成任务</button>
   </div>
</template>
<script>
   export default {
       name:'ListFooter',
       methods:{
           clearAll(){
               this.$emit('clearAllTodo') //使用自定义事件clearAllTodo实现---App组件中给绑定的自定义事件
           }
       }
   }
</script>

在子组件ListFooter.vue中使用$emit来触发父组件App.vue中自定义事件clearAllTodo的逻辑。

小结

  1. 自定义事件是一种组件间通信的方式,适用于:子组件传递数据给父组件

  2. 使用场景:A是父组件,B是子组件,B想给A传数据,需要在 A 中给 B 绑定自定义事件,事件的回调在 A 中定义。

  3. 绑定自定义事件:

    (1).第 1 种方式,在父组件App.vue中:

    <template>
      <div>
        <Student @studentName="sendStudentName"/> 
        <!--或者使用以下非简写方式-->
        <Student v-on:studentName="sendStudentName"/>
      </div>
    </template>
    

    (2).第 2 种方式,在父组件App.vue中:

    <template>
      <div>
        <Student ref="student"/>
      </div>
    </template>
    
    <script>
        import ListFooter from "./components/ListFooter"
        export default {
            name:'App',
            components:{ListFooter},
            data(){
                return {
                    studentName:'刘浩'
                }
            },
            methods: {
              getStudentName(name,...params){
                 this.studentName = name
              }
            },
            mounted(){
                this.$refs.student.$on('studentName',this.getStudentName)//提前准备好getStudentName回调方法
            }    
      }
    </script>
    
  4. 子组件中触发父组件中的自定义事件:
    this.$emit('studentName',传递的数据)

  5. 子组件中解绑自定义事件:
    this.$off('studentName')

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

欢迎关注 无量测试之道 公众号,回复领取资源

Python+Unittest框架API自动化、

Python+Unittest框架API自动化、

Python+Pytest框架API自动化、

Python+Pandas+Pyecharts大数据分析、

Python+Selenium框架Web的UI自动化、

Python+Appium框架APP的UI自动化、

Python编程学习资源干货、

Vue前端组件化框架开发、

资源和代码 免费送啦~
文章下方有公众号二维码,可直接微信扫一扫关注即可。

备注:我的个人公众号已正式开通,致力于IT互联网技术的分享。

包含:数据分析、大数据、机器学习、测试开发、API接口自动化、测试运维、UI自动化、性能测试、代码检测、编程技术等。

微信搜索公众号:无量测试之道

添加关注,让我们一起共同成长!

你可能感兴趣的:(Vue,vue.js)