vue组件间的传值

vue组件间的传值

本人环境为vue2.x，可能某些方法不适用于其他版本

1、父传子props与子传父$emit

<!-- 父组件  传值前要先引入子组件-->
<Child msg="传下去"></Child>

<!-- 子组件用props接收 -->
<p>{{msg}}</p>
export default{
	props:['msg']
	...
}

<!-- 子组件用$emit传值 -->
<button @click="send">点击</button>
export default{
	...
	methods:{
		send(){
			this.$emit('send','123')
		}
	}	
	...
}
<!-- 父组件用v-on监听 -->
<Child @send="get"></Child>
<script type="text/javascript">
	export default {
		...
		methods: {
			get(data) {
				console.log(data)
			}
		}
		...
	} 
</script>

注意父组件v-on绑定的事件名要与子组件中$emit传递的名字相同

其实$emit不只是传给父组件，也可以传给父亲的父亲，亲测有效，只要父组件及更上层的组件使用v-on去监听就能接收，注意事件名与$emit中写的参数名字要相同。

2、总线

在main.js中定义

Vue.prototype.bus = new Vue()

在传值的vue组件中使用this.bus.$emit('参数名','要传的值')进行传值

<h2 @click="get">兄弟</h2>
export default{
	name:'Brother',
	methods:{
		get(){
			this.bus.$emit('text','1236666')
		}
	}
}

在要接收的vue组件中使用this.bus.$on('参数名',function(值){})进行接收

export default{
	...
	mounted(){
		 this.bus.$on('text',function(data){
		 	console.log(data)
		 })
	}
}

3、发布与订阅

首先在当前项目中安装pubsub

npm i pubsub-js

然后在你要传值的两个组件的script中引入

import pubsub from 'pubsub-js'
Vue.use(pubsub)

由于这里使用了Vue，所以还要再引入一个vue才行import Vue from 'vue'

传值的组件中使用pubsub.publish('参数名','要传的值')发布

<h2 @click="get">兄弟</h2>
<script>
	import pubsub from 'pubsub-js'
	import Vue from 'vue'
	Vue.use(pubsub)
	export default{
		...
		methods:{
			get(){
				pubsub.publish('text','123456')
			}
		}
	}
</script>

接收的组件中使用pubsub.subscribe('参数名',(参数名,值)=>{})来订阅

<script>
	import pubsub from 'pubsub-js'
	import Vue from 'vue'
	Vue.use(pubsub)
	export default{
		...
		data(){
			return{
				pubId:''
			}
		},
		mounted(){
			this.pubId = pubsub.subscribe('text',(text,data)=>{
				console.log(data)
			})
		},
		// 销毁
		beforeDestroy(){
			pubsub.unsubscribe(this.pubId)
		}
	}
</script>

最好在生命周期结束前将订阅的pubId销毁