兄弟组件之间的数据传递
思路：创建三个组件分别是<my-aaa>、<my-bbb>、<my-ccc>，在<my-ccc>中接收<my-aaa>与<my-bbb>发送的数据，当改变<my-aaa>或<my-bbb>所发送的数据时，<my-ccc>接收的数据也随之改变
html
<body>
<div id="box">
<my-aaa></my-aaa>
<my-bbb></my-bbb>
<my-ccc></my-ccc>
</div>
<template id="aaa">
<div>
<input type="button" @click="changed" value="我是aaa的按钮">
</div>
</template>
<template id="bbb">
<div>
<input type="button" @click="changed" value="我是bbb的按钮">
</div>
</template>
<template id="ccc">
<div>
<h1>{{a}}</h1>
<h1>{{b}}</h1>
</div>
</template>
</body>
script
需要在外部单放一个实例化对象，用于跟所有人说话。
就是传话用的，本身没有什么意义。
var vm = new Vue();
分别创建三个组件，两个传递数据，一个接收数据。
new Vue({
el:‘#box‘,
components:{
"my-aaa":{
data(){
return {
aMsg:"我是a的数据"
}
},
template:‘#aaa‘
},
"my-bbb":{
data(){
return {
bMsg:‘我是b的数据‘
}
},
template:‘#bbb‘
},
"my-ccc":{
template:‘#ccc‘,
}
}
})
传递数据 ，需要用 $emit(‘key‘,value)
key：用什么名字传递
value：传递的数据
methods:{
changed(){
vm.$emit(‘a-msg‘,this.aMsg);
}
}
接收数据，需要用 $on(‘key‘,(data)={})
key：接收数据的名字
data：可以随意定义，相当于一个回调函数
data(){
return {
a:‘暂无a的数据‘,
b:‘暂无b的数据‘
}
},
mounted(){
vm.$on(‘a-msg‘,(data)=>{
this.a = data;
});
vm.$on(‘b-msg‘,(data)=>{
this.b = data;
})
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件传递</title>
<script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
<my-bbb></my-bbb>
<my-ccc></my-ccc>
</div>
<template id="aaa">
<div>
<input type="button" @click="changed" value="我是aaa的按钮">
</div>
</template>
<template id="bbb">
<div>
<input type="button" @click="changed" value="我是bbb的按钮">
</div>
</template>
<template id="ccc">
<div>
<h1>{{a}}</h1>
<h1>{{b}}</h1>
</div>
</template>
</body>
<script>
var vm = new Vue();
new Vue({
el:‘#box‘,
components:{
"my-aaa":{
methods:{
changed(){
vm.$emit(‘a-msg‘,this.aMsg);
}
},
data(){
return {
aMsg:"我是a的数据"
}
},
template:‘#aaa‘
},
"my-bbb":{
methods:{
changed(){
vm.$emit(‘b-msg‘,this.bMsg);
}
},
data(){
return {
bMsg:‘我是b的数据‘
}
},
template:‘#bbb‘
},
"my-ccc":{
template:‘#ccc‘,
data(){
return {
a:‘暂无a的数据‘,
b:‘暂无b的数据‘
}
},
mounted(){
vm.$on(‘a-msg‘,(data)=>{
this.a = data;
});
vm.$on(‘b-msg‘,(data)=>{
this.b = data;
})
}
}
}
})
</script>
</html>
原文地址：https://www.cnblogs.com/chillLife/p/11054884.html
时间： 2024-08-29 16:21:42