版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39630587/article/details/79843848
组件通信：
- 子组件获取父组件的数据
- 父组件获取子组件的数据
- 平行组件之间的通信
- vue2.0中用子组件修改父组件数据报错问题
- 一定需要通过子组件修改父组件
子组件获取父组件的数据
通过子组件中的属性props，以与父组件数据的绑定。（注意：1.0版本允许子组件修改父组件的数据，使用sync进行同步。2.0不再支持）
<!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>Document</title>
<script src="lib\vue.js"></script>
<style>
[v-cloak] {display: none;}
</style>
<script>
window.onload = function() {
Vue.component('parent', {
template: `
<div>
<h1>父组件-->{{msg1}}, {{msg2}}</h1>
<child :m1="msg1" :m2="msg2"></child>
</div>`,
data() {
return {
msg1: "父组件数据1",
msg2: "父组件数据2",
}
}
})
Vue.component('child', {
template: `
<h2>子组件-->{{m1}}, {{m2}}</h2>`,
props: ['m1', 'm2'],
})
new Vue ({
el: '#box',
data: {
},
})
}
</script>
</head>
<body>
<div id="box" v-cloak>
<parent></parent>
</div>
</body>
</html>父组件获取子组件的数据
利用子组件的事件调用$emit(事件名，数据参数)进行事件监听，并传递参数给父组件。
<!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>Document</title>
<script src="lib\vue.js"></script>
<style>
[v-cloak] {display: none;}
</style>
<script>
window.onload = function() {
Vue.component('parent', {
template: `
<div>
<h1>父组件-->{{msgc}}</h1>
<child @m3="get"></child>
</div>`,
data() {
return {
msgc: ""
}
},
methods: {
get(msg) {
this.msgc = msg;
}
},
}),
Vue.component('child', {
template:`
<div>
<h2>子组件-->{{msg3}}</h2>
<input type="button" name="" id="" value="按钮" @click="send">
</div>`,
data() {
return {
msg3: "子组件数据",
}
},
methods: {
send() {
this.$emit('m3', this.msg3);
}
}
})
new Vue ({
el: '#box',
data: {
},
})
}
</script>
</head>
<body>
<div id="box" v-cloak>
<parent></parent>
</div>
</body>
</html>平行组件之间的通信
通过定义事件调度器，用
on()接收
<!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>Document</title>
<script src="lib\vue.js"></script>
<style>
[v-cloak] {display: none;}
</style>
<script>
window.onload = function() {
// 事件调度器
var Event = new Vue();
Vue.component('First', {
template: `
<div>
First说：<input @keyup="onChange" v-model="fir">
</div>`,
data() {
return {
fir: '',
}
},
methods: {
onChange() {
Event.$emit('sec_said', this.fir);
}
}
})
Vue.component('Second', {
template: `
<div>
Second重复First说的话：{{sec}}
</div>`,
data() {
return {
sec: '',
}
},
mounted() {
// 用变量存下this的指向
var me = this;
Event.$on('sec_said', function(data) {
me.sec = data
})
}
})
new Vue ({
el: '#box',
data: {
},
})
}
</script>
</head>
<body>
<div id="box" v-cloak>
<First></First>
<second></second>
</div>
</body>
</html>vue2.0中用子组件修改父组件数据报错问题
可以利用mounted()进行中转，变为单纯的对子组件进行修改，这样可以不产生错误信息，但是并不能将更改同步到父组件身上
<!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>Document</title>
<script src="lib\vue.js"></script>
<style>
[v-cloak] {display: none;}
</style>
<script>
window.onload = function() {
Vue.component('child', {
template: `
<div>
<h3>子组件</h3>
<input type="button" name="" id="" value="按钮" @click="change()">
<strong>{{b}}</strong>
</div>`,
data() {
return {
b: '',
}
},
props:['msg'],
// 通过mounted进行中转，变为对子集元素的操作
mounted() {
this.b = this.msg;
},
methods: {
change() {
this.b = '被更改了';
}
}
})
new Vue ({
el: '#box',
data: {
a: "父组件数据",
},
})
}
</script>
</head>
<body>
<div id="box" v-cloak>
父级： -> {{a}}
<child :msg="a"></child>
</div>
</body>
</html>一定需要通过子组件修改父组件
那么可以采用下面的方法，将数据封装成一个对象传递给子组件，由于js对象之间是引用的关系，所以改变引用必然改变数据。
<!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>Document</title>
<script src="lib\vue.js"></script>
<style>
[v-cloak] {display: none;}
</style>
<script>
window.onload = function() {
Vue.component('child', {
template: `
<div>
<h3>子组件</h3>
<input type="button" name="" id="" value="按钮" @click="change()">
<strong>{{msg.a}}</strong>
</div>`,
props:['msg'],
mounted() {
this.b = this.msg;
},
methods: {
change() {
this.msg.a = '被更改了';
}
}
})
new Vue ({
el: '#box',
data: {
giveData: {
a: "父组件数据",
}
},
})
}
</script>
</head>
<body>
<div id="box" v-cloak>
父级： -> {{giveData.a}}
<child :msg="giveData"></child>
</div>
</body>
</html>