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

admin • 2022-03-01 20:26 • 5G

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"/>
接收数据：
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```
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>
		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<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中）。
绑定自定义事件：
1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中：
```
<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}
```
3. 若想让自定义事件只能触发一次，可以使用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>
		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<!-- <Student @atguigu="getStudentName" @demo="m1"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
		<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>
           <!-- 组件标签中的html结构会放到插槽位置上 -->
           <div>html结构1</div>
        </Category>
子组件Category中：
        <template>
            <div>
               <!-- 定义插槽，相当于占个位置 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

具名插槽：

父组件中：
        <Category>
            <!-- 当有多个html结构时需要给插槽指定名字 -->
            <template slot="center">
              <div>html结构1</div>
            </template>
		  <!--在template标签上, slot="xxx" 相当于 v-slot:xxx -->
            <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列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<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

后续更新…

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

THE END

二维码

)">

国家信息安全公布：向日葵爆出执行漏洞，还有什么远程工具值得信赖？

< <上一篇

MySQL必知必会01：一个完整的存储过程

下一篇>>

搜索内容

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

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

概述

一前置知识

1.1 ref属性

1.2 props配置项

二利用props进行通信

1.1 父向子

1.2 子向父

1.3 兄弟组件间通信

三组件的自定义事件

四全局事件总线（GlobalEventBus）

4.1 关于事件总线

4.2 全局事件总线图示

4.3 全局事件总线的使用

五消息订阅与发布

5.1 说明

5.2 消息订阅与发布图示

5.3 使用步骤

六插槽

6.1 说明

6.2 使用方式

七 vuex

最新文章

分类

标签云

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

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

概述

一 前置知识

1.1 ref属性

1.2 props配置项

二 利用props进行通信

1.1 父向子

1.2 子向父

1.3 兄弟组件间通信

三 组件的自定义事件

四 全局事件总线（GlobalEventBus）

4.1 关于事件总线

4.2 全局事件总线图示

4.3 全局事件总线的使用

五 消息订阅与发布

5.1 说明

5.2 消息订阅与发布图示

5.3 使用步骤

六 插槽

6.1 说明

6.2 使用方式

七 vuex

最新文章

分类

标签云

一前置知识

二利用props进行通信

三组件的自定义事件

四全局事件总线（GlobalEventBus）

五消息订阅与发布

六插槽