如何进行父子组件间以及兄弟间的通信呢?
父子通信:通过props
向子组件传递数据
子父通信:通过事件
向父组件发送消息
在组件中,使用选项props来声明需要从父级接收到的数据。
props的值有两种方式:
方式一:字符串数组,数组中的字符串就是传递时的名称。
方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
如何让子组件可以使用父组件里面的数据,
父子通信;通过属性传递方式可以实现
-->
<!--rmb自己在子组件里面定义一个属性叫做 rmb 用于接收父组件传递的数据-->
<div id="app">
<son-component :rmb="money"></son-component>
<!-- <child></child>
<parent></parent> -->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//子组件
Vue.component("son-component",{
//在子组件中,使用props接收组件传递过来的数据
props:['rmb'],
template:`
<div>
<h2>组件通信-父子通信</h2>
<p>{{ rmb }}</p>
</div>
`
});
var vm = new Vue({
el:"#app",
data:{
// 父级属性
money:1000
},
})
</script>
</html>
子组件通过使用自定义事件来完成向父组件传递数据。
自定义事件的流程:
在子组件中,通过$emit('事件名称','传递的参数')
来触发事件。
在父组件中,通过v-on
来监听子组件事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<son-component :rmb="money" @myevent="eventHandler"></son-component>
<p>{{message}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//子组件
Vue.component("son-component",{
//向父级传递的数据
data(){
return {
'needMoney': 10000
}
},
//监听子组件绑定的事件
methods:{
phoneToDad(){
//子父通信是通过子组件使用$emit去触发父组件的内置事件
this.$emit("myevent","dad收到son的信息:dad给我一点钱"+this.needMoney)
}
},
//子组件模板
template:`
<div>
<h2>组件通信-子父通信</h2>
<button @click="phoneToDad">son call to dad</button>
</div>
`,
});
var vm = new Vue({
el:"#app",
data:{
message:"" //用于接收子组件传递的数据
},
methods:{
eventHandler(data){
// console.log(data);
this.message = data;
}
}
})
</script>
</html>
兄弟通信
- 兄弟之间传递数据需要借助于事件车,通过事件车的方式传递数据eventBus
- 创建一个Vue的实例,让各个兄弟共用同一个事件机制。
- 主动发触发监听函数(传递数据方),通过一个事件触发bus.$emit(方法名,传递的数据)。
- 被动方定义事件监听函数(接收数据方),通过mounted(){}触发bus.$on(方法名,function(接收数据的参数){用该组件的数据接收传递过来的数据}),此时函数中的this已经发生了改变,可以使用箭头函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兄弟通信</title>
</head>
<body>
<div id="app">
<xiongda></xiongda>
<xionger></xionger>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/**
1、 兄弟之间传递数据需要借助于事件车,通过事件车的方式传递数据eventBus
2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。
3、主动发触发监听函数(传递数据方),通过一个事件触发bus.$emit(方法名,传递的数据)。
4、被动方定义事件监听函数(接收数据方),
通过mounted(){}触发bus.$on(方法名,function(接收数据的参数){用该组件的数据接收传递过来的数据}),
此时函数中的this已经发生了改变,可以使用箭头函数。
*/
var EventBus = new Vue();
//主动方(传递数据方)
Vue.component('xiongda',{
methods:{
callMyLitterBrother(){
// 触发监听函数
EventBus.$emit("phone","熊二,今晚 2020年10月30日18:00:55 一起去揍一下光头强")
}
},
template:`
<div>
<h2>熊大</h2>
<button @click="callMyLitterBrother">打电话给熊二</button>
</div>
`,
});
//被动方(接收数据方)
Vue.component('xionger',{
data: function(){
return {
message: '', // 用于接收熊大传递的信息
}
},
created(){
// 定义事件监听函数
EventBus.$on('phone', (data) => {
console.log(data);
this.message = data;
})
},
template:`
<div>
<h2>熊二</h2>
<p>接收熊大的信息:{{message}}</p>
</div>
`,
});
var vm = new Vue({
el: '#app',
data: {
title: 'hi vuejs!',
}
});
</script>
</html>