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
销毁