框架小白白白白的进阶之路 --- Vue（五）组件之间的通信
组件通信
父组件与子组件之间的通信
父子组件:组建中定义组件,形成组件嵌套的时候，就是我们所说的父子组件了。
子组件调用父组件的数据：
子组件中使用：m与props获取父组件中的数据的引用 发生了数据的传递
<div id="box">
<aaa>aaa>
div>
<template id="aaa">
<div>
<h1>11111h1>
<bbb :m="msg">bbb>
div>
template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
props:['m'],
template:'我是bbb组件->{{m}}
'
}
}
}
}
});
script>
子组件中使用$parent直接调用父组件中的数据没有数据的传递
<div id="count">
父组件中的msg: {{ msg }}
<child1 ref='c1'>child1>
<child2 ref='c2'>child2>
div>
<template id="child1">
<div>
{{ msg }}
<button @click="showpmsg">
显示父组件msg
button>
div>
template>
<template id="child2">
<div>
{{ msg }}
div>
template>
<script>
Vue.component('child1', {
template: '#child1',
data () {
return {
msg: '这是子组件1的信息'
}
},
methods: {
showpmsg () {
alert(this.$parent.msg)
}
}
})
Vue.component('child2', {
template: '#child2',
data () {
return {
msg: '这是子组件2的信息'
}
}
})
new Vue({
el: '#count',
data: {
msg: 'hello parent'
}
})
script>
父组件调用子组件中的数据
子组件使用$emit方法发送数据，父组件进行接收需要有事件触发 且发生数据的传递
<div id="box">
<aaa>aaa>
div>
<template id="aaa">
<div>
<span>我是父级 -> {{msg}}span>
<bbb @child-msg="get">bbb>
div>
template>
<template id="bbb">
<div>
<h3>子组件-h3>
<input type="button" value="send" @click="send">
div>
template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
get(msg){
this.msg=msg; //第四步：get方法中，将传递进来的参数（要调用的子组件的值）赋值给自己的数据（this.msg）
}
},
components:{
'bbb':{
data(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a); //第二步：send中，调用this.$emit('命名','数据')，将数据命名并发送给父组件
}
}
}
}
}
}
});
script>
使用$children 数组直接调用子组件的数据不发生数据的传递
<div id="count">
<button @click="showmsg">
显示两个组件的信息
button>
<child1>child1>
<child2>child2>
div>
<template id="child1">
<div>
{{ msg }}
div>
template>
<template id="child2">
<div>
{{ msg }}
div>
template>
<script>
Vue.component('child1', {
template: '#child1',
data () {
return {
msg: '这是子组件1的信息'
}
}
})
Vue.component('child2', {
template: '#child2',
data () {
return {
msg: '这是子组件2的信息'
}
}
})
new Vue({
el: '#count',
data: {
},
methods: {
showmsg () {
for(var i = 0; i < this.$children.length; i++) {
alert(this.$children[i].msg)
}
}
}
})
script>
有时候组件过多的话，就很记清各个组件的顺序与位置，所以通过给子组件一个索引ID,然后通过这个ID对数据进行调用
<div id="count">
<button @click="showmsg">
显示两个组件的信息
button>
<child1 ref='c1'>child1>
<child2 ref='c2'>child2>
div>
<template id="child1">
<div>
{{ msg }}
div>
template>
<template id="child2">
<div>
{{ msg }}
div>
template>
<script>
Vue.component('child1', {
template: '#child1',
data () {
return {
msg: '这是子组件1的信息'
}
}
})
Vue.component('child2', {
template: '#child2',
data () {
return {
msg: '这是子组件2的信息'
}
}
})
new Vue({
el: '#count',
data: {
},
methods: {
showmsg () {
alert(this.$refs.c1.msg)
alert(this.$refs.c2.msg)
}
}
})
script>
兄弟组件之间的通信
- 创建一个Vue对象（Event）
- 将a组件的数据传到c中
a中定义触发事件，触发emit方法 Event. $emit('a-msg',this.a) - 在组件c中的mounted（钩子函数）中使用$on接收a发送到Event中的数据
mounted(){//钩子函数 生命周期函数
var _this = this;
//接收A组件的数据
Event.$on('a-msg',function(a){
_this.a=a;
});
}
使用$emit发送，使用 $on接收
使用（新建的空的Vue对象）Event. $emit()发送数据,使用Event. $on()接收数据（相当于使用emit把数据存储到Event对象中，然后使用on取出来使用）
<div id="box">
<com-a>com-a>
<com-b>com-b>
<com-c>com-c>
div>
<script>
//准备一个空的实例对象
var Event=new Vue();
var A={
template:`
我是A组件 -> {{a}}
`,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
data(){
return {
a:'我是a数据'
}
}
};
var B={
template:`
我是B组件 -> {{a}}
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
data(){
return {
a:'我是b数据'
}
}
};
var C={
template:`
我是C组件
接收过来的A的数据为: {{a}}
接收过来的B的数据为: {{b}}
`,
data(){
return {
a:'',
b:''
}
},
mounted(){//钩子函数 生命周期函数
var _this = this;
//接收A组件的数据
Event.$on('a-msg',function(a){
_this.a=a;
});
//接收B组件的数据
Event.$on('b-msg',function(a){
_this.b=a;
};
}
};
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
script>