您的位置：首页 > 产品设计 > UI/UE

vue2.0组件之间如何通信

2017-11-24 10:39 936 查看

1.父组件传递数据给子组件

通过props属性来实现

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js"></script>

</head>
<body>
<div class="box">
<aaa :msg="a"></aaa>
</div>
<template id="aa">
<div>
<span>我是子组件</span>
<p>{{msg}}</p> //子组件使用
</div>
</template>
<script type="text/javascript">
new Vue({
el:'.box',
data:{

a:'我是父组件数据'

},
components:{
'aaa':{
props:['msg'],//通过props属性来实现
template:'#aa',

}
}
})
</script>
</body>
</html>

props的写法：

props: ['msg'] //通常这种写法用的多

或者

props: {
msg: Array //这样可以指定传入的类型，如果类型不对，会警告
}

或者

props: {
msg: {
type: Array,
default: [0,0,0] //这样可以指定默认的值
}
}

以上就实现了父组件向子组件传递数据.

但是有时也有需求就是子组件可以改变父组件传递的数据，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js"></script>

</head>
<body>
<div class="box">
<h2>{{getData.a}}</h2>
<aaa :msg="getData"></aaa>
</div>
<template id="aa">
<div>
<span>我是子组件</span>
<input type="button" value='按钮' @click="change">
<strong>{{msg.a}}</strong>
</div>
</template>
<script type="text/javascript">
new Vue({
el:'.box',
data:{
getData:{
a:'我是父组件数据' //父组件的数据格式是对象即可
}
},
components:{
'aaa':{
props:['msg'],
template:'#aa',
methods:{
change(){
this.msg.a='我变化了'
}
}
}
}
})
</script>
</body>
</html>

2.非父子组件之间互相通信（这时可以通过eventHub来实现通信.所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件.）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div class="box">
<aaa></aaa>
<bbb></bbb>
<ccc></ccc>
</div>
<script type="text/javascript">
var Event=new Vue();//创建事件中心
var A={
template:`<div>
<span>我是A组件</span>
<input type="button" value="把A传给C" @click="send" >
</div>`
,
data(){
return {
a:'我是A数据'
}
},
methods:{
send(){
Event.$emit('a-msg',this.a)
}
}
}

var C={
template:`<div>
<span>我是C组件</span>
<div>
<span>{{c}}</span>
</div>
`
,
data(){
return {
c:''
}
},
mounted(){
Event.$on('a-msg',function(a){
this.c=a
}.bind(this))
}
}
new Vue({
el:'.box',
components:{
'aaa':A,
'bbb':B,
'ccc':C
}
})
</script>
</body>
</html>

3.子组件向父组件传递数据

子组件:

<template>
<div @click="up"></div>
</template>

methods: {
up() {
this.$emit('upup','hehe'); //主动触发upup方法，'hehe'为向父组件传递的数据,传递多个数据中间用逗号隔开
}
}

父组件：

<div>
<child @upup="change" ></child> //监听子组件触发的upup事件,然后调用change方法
</div>
data(){
return {
msg1:''
}
},
methods: {
change(msg) {
this.msg1 = msg;
}
}

以上就是vue2.0中组件通信方式，写的比较详细是为了以后自己哪天忘记能快速想起来，也希望自己写的对别人也有帮助，大家一起学习一起进步o

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航