Vue全家桶之组件间的通信（四）_儒rs

网络 02-07 5920

Vue全家桶之组件间的通信（四）概述

组件是Vue中最强大的功能，组件实例之间的数据无法直接相互引用，所以需要掌握组件间通信的方式和技巧。

组件实例之间的关系可以分为父子关系、兄弟关系和隔代关系。针对组件之间不同的关系，通常有以下三种通信需求：

父组件===>子组件/后代组件；子组件/后代组件===>父组件；兄弟组件之间通信。

针对不同的通信需求，需要采取不同的通信方式，本文将介绍以下6种通信方式：

利用props通信自定义事件事件总线消息订阅与发布插槽vuex 一前置知识

在学习组件间通信的几种方式前，先介绍点前置知识，ref属性和props配置项，接下来这部分将讲解它们的使用和注意点，如果对这部分知识比较熟悉，建议跳过。

1.1 ref属性被用来给元素或子组件注册引用信息（id的替代者）应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）使用方式： ① 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School> ② 获取：this.$refs.xxx <template> <div> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button> <School ref="sch"/> </div> </template> <script> //引入School组件 import School from './components/School' export default { name:'App', components:{School}, data() { return { msg:'欢迎学习Vue！' } }, methods: { showDOM(){ console.log(this.$refs.title) //真实DOM元素 console.log(this.$refs.btn) //真实DOM元素 console.log(this.$refs.sch) //School组件的实例对象（vc） } }, } </script> 1.2 props配置项

功能：让组件接收外部传过来的数据

传递数据：<Demo name="xxx"/>

接收数据：

第一种方式（只接收）：props:['name']

第二种方式（限制类型）：props:{name:String}

第三种方式（限制类型、限制必要性、指定默认值）：

props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 } }

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

二利用props进行通信

一种组件间通信的方式，适用于：

父组件 ===> 子组件子组件 ===> 父组件兄弟组件之间 1.1 父向子利用props配置项可以使组件接收外部传递过来的数据，因此很适用于组件间的通信。利用props配置项，特别适用于实现父组件向子组件传递数据，只需要在子组件props配置项声明好要接收的变量名，在父组件中通过属性传递即可。

App.vue(父组件)

<template> <div>   <Student name="李四" sex="女" :age="18"/> </div> </template> <script> import Student from './components/Student' export default { name:'App', components:{Student} } </script>

Student.vue(子组件)

<template> <div> <h1>{{msg}}</h1> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <h2>学生年龄：{{myAge+1}}</h2> <button @click="updateAge">尝试修改收到的年龄</button> </div> </template> <script> export default { name:'Student', data() { console.log(this) return { msg:'我是一个尚硅谷的学生', //props是只读的，需要拷贝一份给data才能修改 myAge:this.age } }, methods: { updateAge(){ this.myAge++ } }, //简单声明接收 props:['name','age','sex'] } </script> 1.2 子向父

利用props，可以实现子组件向父组件传递数据，只需要两步：

第一步：父组件中写好一个函数，然后先传递一个函数给子组件；第二步：在子组件中调用传递过来的函数，通过参数的方式传递数据给父组件，完成相应操作。

App.vue（父组件）

<template> <div class="app"> <h1>{{msg}}</h1>  <School :getSchoolName="getSchoolName"/> </div> </template> <script> import School from './components/School' export default { name:'App', components:{School}, data() { return { msg:'你好啊！' } }, methods: { getSchoolName(name){ console.log('App收到了学校名：',name) } } } </script> <style scoped> .app{ background-color: gray; padding: 5px; } </style>

School.vue（子组件）

<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> <style scoped> .school{ background-color: skyblue; padding: 5px; } </style> 1.3 兄弟组件间通信

利用props配置项还可以实现兄弟组件之间的通信，其实就是前两种方式结合起来运用，是vue中实现兄弟组件间通信比较基础的方式。

前提是数据掌握在兄弟组件共同的父组件身上。利用props实现父组件向子组件通信，把数据传递到其中一个子组件，提供给该子组件运用。利用props实现子组件向父组件通信，在另一个子组件调用事先传递过来的函数，完成对数据的操作。总之，就是以共同的父组件为中介，实现兄弟组件之间的间接通信。

案例描述

比如下面这个Todolist的案例，要实现在Header组件中实现添加操作，然后在List组件中显示出来。关系为MyHeader.vue和MyList.vue为兄弟组件，放在同个文件夹components下面，App.vue为两者共同的父组件。

实现图示

App的todos[...]数组存放任务数据App利用props将数据传给List组件显示App利用props预先传递一个添加函数给Header组件，等到执行添加操作时回调

App.vue

<template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"/> <MyList :todos="todos"/> </div> </div> </div> </template> <script> import MyHeader from './components/MyHeader' import MyList from './components/MyList' export default { name:'App', components:{MyHeader,MyList}, data() { return { //由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升） todos:[ {id:'001',title:'抽烟',done:true}, {id:'002',title:'喝酒',done:false}, {id:'003',title:'开车',done:true} ] } }, methods: { //添加一个todo addTodo(todoObj){ this.todos.unshift(todoObj) }, } } </script> <style> /*base*/ body { background: #fff; } .todo-container { width: 600px; margin: 0 auto; } .todo-container .todo-wrap { padding: 10px; border: 1px solid #ddd; border-radius: 5px; } </style>

MyList.vue

<template> <ul class="todo-main"> <li v-for="todoObj in todos" :key="todoObj.id" > <label> <input type="checkbox" :checked="todoObj.done"/> <span>{{todoObj.title}}</span> </label> </li> </ul> </template> <script> export default { name:'MyList', //声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的 props:['todos'] } </script> <style scoped> /*main*/ .todo-main { margin-left: 0px; border: 1px solid #ddd; border-radius: 2px; padding: 0px; } /*item*/ li { list-style: none; height: 36px; line-height: 36px; padding: 0 5px; border-bottom: 1px solid #ddd; } </style>

MyHeader.vue

<template> <div class="todo-header"> <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/> </div> </template> <script> //nanoid需要通过npm安装，可以按特定规则生成唯一id import {nanoid} from 'nanoid' export default { name:'MyHeader', //接收从App传递过来的addTodo props:['addTodo'], data() { return { //收集用户输入的title title:'' } }, methods: { add(){ //校验数据 if(!this.title.trim()) return alert('输入不能为空') //将用户的输入包装成一个todo对象 const todoObj = {id:nanoid(),title:this.title,done:false} //通知App组件去添加一个todo对象 this.addTodo(todoObj) //清空输入 this.title = '' } }, } </script> <style scoped> /*header*/ .todo-header input { width: 560px; height: 28px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; padding: 4px 7px; } .todo-header input:focus { outline: none; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } </style> 三组件的自定义事件

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

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

绑定自定义事件：

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

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

<Demo ref="demo"/> ...... mounted(){ this.$refs.xxx.$on('atguigu',this.test) }

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

触发自定义事件：this.$emit('atguigu',数据)

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

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

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

App.vue

<template> <div class="app"> <h1>{{msg}}，学生姓名是:{{studentName}}</h1>    <Student ref="student" @click.native="show"/> </div> </template> <script> import Student from './components/Student' import School from './components/School' export default { name:'App', components:{Student}, data() { return { msg:'你好啊！', studentName:'' } }, methods: { getStudentName(name,...params){ console.log('App收到了学生名：',name,params) this.studentName = name }, m1(){ console.log('demo事件被触发了！') }, show(){ alert(123) } }, mounted() { this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件 // this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性） }, } </script> <style scoped> .app{ background-color: gray; padding: 5px; } </style>

Student.vue

<template> <div class="student"> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <h2>当前求和为：{{number}}</h2> <button @click="add">点我number++</button> <button @click="sendStudentlName">把学生名给App</button> <button @click="unbind">解绑atguigu事件</button> <button @click="death">销毁当前Student组件的实例(vc)</button> </div> </template> <script> export default { name:'Student', data() { return { name:'张三', sex:'男', number:0 } }, methods: { add(){ console.log('add回调被调用了') this.number++ }, sendStudentlName(){ //触发Student组件实例身上的atguigu事件 this.$emit('atguigu',this.name,666,888,900) // this.$emit('demo') // this.$emit('click') }, unbind(){ this.$off('atguigu') //解绑一个自定义事件 // this.$off(['atguigu','demo']) //解绑多个自定义事件 // this.$off() //解绑所有的自定义事件 }, death(){ this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。 } }, } </script> <style scoped> .student{ background-color: pink; padding: 5px; margin-top: 30px; } </style> 四全局事件总线（GlobalEventBus） 4.1 关于事件总线一种组件间通信的方式，适用于任意组件间通信。全局事件总线并不是vue中新的api，而是一种实践技巧，基于之前自定义事件的知识。首先需要一个事件总线X，它是个对象，需要满足两点要求：一是所有组件实例都能访问到；二是能够使用$on、$off、$emit等api。如果组件A想要收到其他组件传递过来的数据，那么组件A需要写段代码，给X绑定一个自定义事件demo，其回调函数在组件A中。如果组件D想要传递数据给组件A，那么组件D需要写段代码，触发X上的自定义事件demo，通过参数的方式携带数据666给组件A。同理，其他组件要想收到数据就给X绑定自定义事件，需要传递数据就触发X上的自定义事件，这样就可以实现任意组件的通信。而对于X来说，相当于一个总线的作用，其他组件之间的通信都需要经过它，以它为中介。 4.2 全局事件总线图示

4.3 全局事件总线的使用

安装全局事件总线：

new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ...... })

使用事件总线：

① 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) }

② 提供数据：this.$bus.$emit('xxxx',数据)

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

main.js

//引入Vue import Vue from 'vue' //引入App import App from './App.vue' //关闭Vue的生产提示 Vue.config.productionTip = false //创建vm new Vue({ el:'#app', render: h => h(App), beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线 }, })

App.vue

<template> <div class="app"> <h1>{{msg}}</h1> <School/> <Student/> </div> </template> <script> import Student from './components/Student' import School from './components/School' export default { name:'App', components:{School,Student}, data() { return { msg:'你好啊！', } } } </script> <style scoped> .app{ background-color: gray; padding: 5px; } </style>

School.vue

<template> <div class="school"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </template> <script> export default { name:'School', data() { return { name:'尚硅谷', address:'北京', } }, mounted() { // console.log('School',this) this.$bus.$on('hello',(data)=>{ console.log('我是School组件，收到了数据',data) }) }, beforeDestroy() { this.$bus.$off('hello') }, } </script> <style scoped> .school{ background-color: skyblue; padding: 5px; } </style>

Student.vue

<template> <div class="student"> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <button @click="sendStudentName">把学生名给School组件</button> </div> </template> <script> export default { name:'Student', data() { return { name:'张三', sex:'男', } }, mounted() { // console.log('Student',this.x) }, methods: { sendStudentName(){ this.$bus.$emit('hello',this.name) } }, } </script> <style lang="less" scoped> .student{ background-color: pink; padding: 5px; margin-top: 30px; } </style> 五消息订阅与发布 5.1 说明一种组件间通信的方式，适用于任意组件间通信。原生js没法轻松实现消息订阅与发布，可以通过引入第三方库实现，实现该方式的库有很多。这些第三方库适用于任意框架，不止于vue框架。 5.2 消息订阅与发布图示

5.3 使用步骤

安装pubsub：npm i pubsub-js

引入: import pubsub from 'pubsub-js'

接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息 }

提供数据：pubsub.publish('xxx',数据)

最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

比如，和上面全局事件总线中同样的例子，我们也可以通过消息订阅与发布去实现。

School.vue

<template> <div class="school"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </template> <script> import pubsub from 'pubsub-js' export default { name:'School', data() { return { name:'尚硅谷', address:'北京', } }, mounted() { // console.log('School',this) /* this.$bus.$on('hello',(data)=>{ console.log('我是School组件，收到了数据',data) }) */ this.pubId = pubsub.subscribe('hello',(msgName,data)=>{ console.log(this) console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data) }) }, beforeDestroy() { // this.$bus.$off('hello') pubsub.unsubscribe(this.pubId) }, } </script> <style scoped> .school{ background-color: skyblue; padding: 5px; } </style>

Student.vue

<template> <div class="student"> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <button @click="sendStudentName">把学生名给School组件</button> </div> </template> <script> import pubsub from 'pubsub-js' export default { name:'Student', data() { return { name:'张三', sex:'男', } }, mounted() { // console.log('Student',this.x) }, methods: { sendStudentName(){ // this.$bus.$emit('hello',this.name) pubsub.publish('hello',666) } }, } </script> <style lang="less" scoped> .student{ background-color: pink; padding: 5px; margin-top: 30px; } </style> 六插槽 6.1 说明作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。分类：默认插槽、具名插槽、作用域插槽 6.2 使用方式

默认插槽：

父组件中： <Category>  <div>html结构1</div> </Category> 子组件Category中： <template> <div>  <slot>插槽默认内容...</slot> </div> </template>

具名插槽：

父组件中： <Category>  <template slot="center"> <div>html结构1</div> </template>  <template v-slot:footer> <div>html结构2</div> </template> </Category> 子组件中： <template> <div>  <slot name="center">插槽默认内容...</slot> <slot name="footer">插槽默认内容...</slot> </div> </template>

作用域插槽

① 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

② 具体编码：

父组件中： <Category> <template scope="scopeData">  <ul> <li v-for="g in scopeData.games" :key="g">{{g}}</li> </ul> </template> </Category> <Category> <template slot-scope="scopeData">  <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4> </template> </Category> 子组件中： <template> <div> <slot :games="games"></slot> </div> </template> <script> export default { name:'Category', props:['title'], //数据在子组件自身 data() { return { games:['红色警戒','穿越火线','劲舞团','超级玛丽'] } }, } </script> 七 vuex

Vue全家桶之Vuex