初识 Vue（18）---（非父子组件间的传值）

最新推荐文章于 2024-04-14 13:55:52 发布

姜皓

最新推荐文章于 2024-04-14 13:55:52 发布

阅读量953

点赞数 1

分类专栏： # Vue # 从浅入深学 Vue

本文链接：https://blog.csdn.net/jianghao233/article/details/81262353

版权

Vue 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

从浅入深学 Vue

28 篇文章 8 订阅

订阅专栏

非父子组件间的传值

常一个应用会以一棵嵌套的组件树的形式来组织：将一个大组件进行拆分

Component Tree

下图这种情况的组件间传值（父子组件间传值）

方法：父组件通过 Props 向子组件传值，子组件通过事件触发向父组件传值

下图这种情况的组件间传值（父子组件间隔代传值，也是非父子组件间传值）

方法：将第二层作为中间层，父组件（1）通过 Props 向子组件（2）传值，父组件（2）通过 Props 向子组件（3）传值，

子组件（3）通过事件触发向父组件（2）传值；子组件（2）通过事件触发向父组件（1）传值；

下图这种情况的组件间传值（非父子组件间传值）

参照上面的方法，也可以将第1层、第2层作为中间层来实现传值，原理上可行；但极其复杂...

解决非父子组件间传值方法：1.Vue 官方提供的 Vuex 框架 2.发布订阅模式（总线机制 / Bus / 观察者模式）

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非父子组件间的传值</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<child content="Dell"></child>
		<child content="Lee"></child>
	</div>	
	<script>
	Vue.component('child',{
		props:{
			content:String
		},
		template:'<div>{{content}}</div>',
		
	})

	var vm = new Vue({
		el:'#root',
		})
	</script>
</body>
</html>

输出：

功能：点击 Dell 时，下面的 Lee 也变成 Dell ; 点击 Lee,上面的 Dell 也会变为 Lee;(非父子组件间传值)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非父子组件间的传值</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<child content="Dell"></child>
		<child content="Lee"></child>
	</div>	
	<script>
	//在 Vue类上挂载 bus属性，每一个Vue的实例上都会有bus属性
	Vue.prototype.bus = new Vue()
	Vue.component('child',{
		//子组件的 data 一定是个函数
		data:function(){     //单项数据流
			return{      
				selfContent: this.content
			}
		},
		props: {
			content:String
		},
		template:'<div @click="handleClick">{{content}}</div>',
		methods:{
			handleClick:function(){
				this.bus.$emit('change',this.selfContent)
	//触发 change 事件且携带数据(content)
	
			}
		},
	//监听 Bus 的改变
		mounted:function(){
			var this_ = this  //为解决作用域发生变化，需保持 this
			this.bus.$on('change',function(msg){
				this_.selfContent = msg

			})
		}
		
	})

	var vm = new Vue({
		el:'#root',
		})
	</script>
</body>
</html>

输出：（bus 总线来进行非父子组件间的传值）

姜皓

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识 Vue（18）---（非父子组件间的传值）

非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织：将一个大组件进行拆分下图这种情况的组件间传值（父子组件间传值）方法：父组件通过 Props 向子组件传值，子组件通过事件触发向父组件传值下图这种情况的组件间传值（父子组件间隔代传值，也是非父子组件间传值）方法：将第二层作为中间层，父组件（1）通过 Props 向子组件（2）传值，父组件（2）通过 Prop...
复制链接

扫一扫