Vue - 兄弟组件传值
2019-10-17 本文已影响0人
ElricTang
1. 使用中间Vue实例实现兄弟传值。
- 创建一个用于转发数据的中间Vue实例bus
- 在子组件1中使用
bus.$emit()发布事件。 - 在子组件2中使用
bus.$on()监听子组件1发布的事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src='../node_modules/vue/dist/vue.js'></script>
<script src='../node_modules/vue-resource/dist/vue-resource.js'></script>
</head>
<body>
<div id='app'>
<child1></child1>
<child2></child2>
</div>
<script>
var bus = new Vue({ });
var child1 = {
template:'<button @click="send">发送数据给子组件child2</button>',
methods:{
send(){
bus.$emit('send-data','hello world from child1');
}
}
};
var child2 = {
template:'<p>{{msg}}</p>',
data(){
return {
msg:''
}
},
created(){
bus.$on('send-data',this.get);
},
methods:{
get(data){
this.msg = data;
console.log(`接收到来自child1的数据-${data}`);
}
}
};
var vm = new Vue({
el:'#app',
components:{
child1,
child2
}
})
</script>
</body>
</html>
2. 借助父组件转发
- 子组件1通过
this.$emit()发布事件 - 父组件通过监听事件获取到子组件1的数据
- 父组件通过
props的方式把子组件1的数据转发给子组件2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src='../node_modules/vue/dist/vue.js'></script>
<script src='../node_modules/vue-resource/dist/vue-resource.js'></script>
</head>
<body>
<div id='app'>
<child1 @send-data="get"></child1>
<child2 :message="msg"></child2>
</div>
<script>
var child1 = {
template:'<button @click="send">发送数据给子组件child2</button>',
methods:{
send(){
this.$emit('send-data','hello world from child1');
}
}
};
var child2 = {
template:'<h1>{{message}}</h1>',
props:{
message:String
}
};
var vm = new Vue({
el:'#app',
components:{
child1,
child2
},
data:{
msg:'',
},
methods:{
get(data){
this.msg = data;
}
}
})
</script>
</body>
</html>
3. 使用Vuex管理状态
- Vuex统一管理共享数据，具体使用请参考Vuex官网 传送门
