Vue2.x 兄弟组件之间的数据传递
Posted chilllife
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2.x 兄弟组件之间的数据传递相关的知识，希望对你有一定的参考价值。
兄弟组件之间的数据传递
思路：创建三个组件分别是<my-aaa>、<my-bbb>、<my-ccc>，在<my-ccc>中接收<my-aaa>与<my-bbb>发送的数据，当改变<my-aaa>或<my-bbb>所发送的数据时，<my-ccc>接收的数据也随之改变
<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>
以上是关于Vue2.x 兄弟组件之间的数据传递的主要内容，如果未能解决你的问题，请参考以下文章