Vue-非父子组件间的传值

最新推荐文章于 2022-05-12 10:09:27 发布

驴三骑

最新推荐文章于 2022-05-12 10:09:27 发布

阅读量126

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_27142569/article/details/105516255

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

非父子组件间的传值

非父子组件间的传值

参考官方文档：https://cn.vuejs.org/v2/guide/migration.html#dispatch-%E5%92%8C-broadcast-%E6%9B%BF%E6%8D%A2
在开发中，常常需要在非父子组件中传值，有如下两种方案

使用总线方式

使用方式

在Vue原型中新建一个总线:

// 通过实例化一个空的 Vue 实例来实现总线
Vue.prototype.$bus=new Vue()

$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
prototype 的作用可以看成是一个作用域，具体的使用方法和注意事项，参考官方文档：https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
2. 自定义组件：

//创建组件
Vue.component('my-lable',{
	data(){
		return {
			msg:this.content
		}
	},
	props:{
		// 校验类型
		content:String
	},
	template:'<div @click="handleDeliveryValue">{{msg}}</div>',
	methods:{
		handleDeliveryValue(){
			// 触发总线的$on 事件，必须和 $on 在一个实例上，所以使用 $bus
			this.$bus.$emit('handler-change-value',this.msg)
		}
	},
	// 挂载后开始监听
	mounted(){
		// 通过$emit事件触发
		this.$bus.$on('handler-change-value',function(content){
			// TODO
		})
	},
	// 最好在组件销毁前,清除事件监听
	destroyed() {
		this.$bus.$off('handler-change-value',this.handleDeliveryValue)
	}
})

完整代码

<body>
		<div id="app">
			<my-lable content='one'></my-lable>
			<my-lable content='two'></my-lable>
		</div>
	</body>
	<script>
		// 通过实例化一个空的 Vue 实例来实现总线
		Vue.prototype.$bus=new Vue()
		//创建组件
		Vue.component('my-lable',{
			data(){
				return {
					msg:this.content
				}
			},
			props:{
				// 校验类型
				content:String
			},
			template:'<div @click="handleDeliveryValue">{{msg}}</div>',
			methods:{
				handleDeliveryValue(){
					// 触发总线的$on 事件
					this.$bus.$emit('handler-change-value',this.msg)
				}
			},
			// 挂载后开始监听
			mounted(){
				var _this=this
				// 通过$emit事件触发
				this.$bus.$on('handler-change-value',function(content){
					// 更改msg的值
					_this.msg=content
				})
			},
			// 最好在组件销毁前,清除事件监听
			destroyed() {
				this.$bus.$off('handler-change-value',this.handleDeliveryValue)
			}
		})
		new Vue({
			el:'#app'
		})
	</script>

使用vuex方式

参考：https://vuex.vuejs.org/zh/

新建一个 index.js 文件，负责管理vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 导出vuex创建的仓库
export default new Vuex.Store({
  state: {
    city: '北京' // 存储一个默认值
  },
  actions: {
    changeCity (ctx, city) {
      ctx.commit('changeCity', city) //调用mutations的changeCity 方法修改值
    }
  },
  mutations: {
    changeCity (state, city) { // 修改city的值
      state.city = city
    }
  }
})

通过{{this.$store.state.city}} 插值表达式方式在其他页面获取city的值。
使用 this.$store.dispatch('changeCity', '天津') 修改值,其他页面的city值会显示最新的值

驴三骑

关注

0
点赞
踩
1

收藏

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

非父子组件间的传值参考官方文档：https://cn.vuejs.org/v2/guide/migration.html#dispatch-%E5%92%8C-broadcast-%E6%9B%BF%E6%8D%A2在开发中，常常需要在非父子组件中传值，有如下两种方案使用总线方式使用方式在Vue原型中新建一个总线:// 通过实例化一个空的 Vue 实例来实现总线Vue.proto...
复制链接

扫一扫

专栏目录