vue2.0组件之间如何通信
程序员文章站
2022-07-13 22:45:04
...
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
上一篇： Vue 1组件的使用
下一篇： WPF中的Style(风格,样式)