首页 > 其他分享> 文章详细

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

2022-07-10 13:00:43 阅读：208 来源： 互联网

标签：Vue name 自定义间通信 vue Student 组件 studentName

前言

前期分享的测试开发系列！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，=后的clearAllTodo是methods 回调函数的名称。

子组件：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的逻辑。

小结

自定义事件是一种组件间通信的方式，适用于：子组件传递数据给父组件。
使用场景：A是父组件，B是子组件，B想给A传数据，需要在 A 中给 B 绑定自定义事件，事件的回调在 A 中定义。

绑定自定义事件：

(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>

子组件中触发父组件中的自定义事件：
this.$emit('studentName',传递的数据)
子组件中解绑自定义事件：
this.$off('studentName')
组件上也可以绑定原生 DOM 事件，需要使用native修饰符。

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

Python+Unittest框架API自动化、

Python+Pytest框架API自动化、

Python+Pandas+Pyecharts大数据分析、

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

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

Python编程学习资源干货、

Vue前端组件化框架开发、

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

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

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

微信搜索公众号：无量测试之道，或扫描下方二维码：

添加关注，让我们一起共同成长！

标签：Vue,name,自定义,间通信,vue,Student,组件,studentName
来源： https://www.cnblogs.com/Wu13241454771/p/16463016.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

前言

使用方法

项目实战

小结