vue中组件之间的通信
1、父传子—>prop
通过prop(可以在组件上注册一些自定义的属性)向子组件传递数据;
- 父组件在子组件标签上通过自定义属性传递数据;
- 子组件通过props接收父组件传过来的参数
props接收数据的两种方式:
1、数组
props:["xxxx","xxxx"]
2、对象
props:{
xxx:{type:数据类型,default:默认值(父组件)}
}
- 在子组件中将传递过来的数据展示到页面上
父组件
<template>
<div class="TongXingFuZuJian">
<!-- 1、通过在组件上自定义属性传递数据-->
<TongXinZi :parentMessage="message" :age="age"/>
</div>
</template>
<script>
import TongXinZi from "@/components/TongXinZi";
export default {
name: "TongXingFuZuJian",
components: {TongXinZi},
data() {
return {
message: "我是父组件传过来的数据",
age:5
}
}
}
</script>
子组件
不能直接对传递过来的数据进行修改,如果需要修改,子组件需要一个data去接收传递过来的数据,然后修改data
<template>
<div class="TongXinZi">
<p>{{ parentMessage }}</p>
<p>{{ age }}</p>
</div>
</template>
<script>
export default {
name: "TongXinZi",
//2、子组件通过props接收数据--字符串数组
//props接收数据有两种方式:数组,对象
// props:['parentMessage',"age"],
//对象:需要对传过来的数据进行数据类型验证
props: {
parentMessage: {type: String,//类型验证
default: "默认值"},
age: {type: Number, default: 18},
}
}
</script>
2、子传父---->$emit
通过自定义事件向父组件传递数据;
自定义事件的流程:
- 在子组件中通过 e m i t 来触发事件,传递数据, emit来触发事件,传递数据, emit来触发事件,传递数据,emit需要两个参数(自定义事件的名称、传递的数据)
- 在父组件中通过v-on监听子组件中自定义的事件
子组件
<template>
<div class="TongXinZi">
<button @click="sendToParent">点击给父组件传递数据</button>
</div>
</template>
<script>
export default {
name: "TongXinZi",
data() {
return {
num:18
}
},
methods: {
sendToParent(){
//参数:1、自定义事件名称;2、传递的数据
this.$emit("getChildMsg",this.num)
}
}
}
</script>
父组件
不能直接对传递过来的数据进行修改,如果需要修改,父组件需要一个data去接收传递过来的数据,然后修改data
<template>
<div class="TongXingFuZuJian">
<TongXinZi @getChildMsg="getChildMsg"/>
</div>
</template>
<script>
import TongXinZi from "@/components/TongXinZi";
export default {
name: "TongXingFuZuJian",
components: {TongXinZi},
methods: {
getChildMsg(value){
//value就是子组件传过来的数据
console.log(value);
}
}
}
</script>
3、父子组件通信,跨级通信---->provide / inject
- provider:提供,是一个对象,或者返回对象的函数
- inject:注入,可以是一个字符串数组,也可以是一个对象,在需要使用的地方注入即可
- 注意:
provide,inject不是响应式的
,即在祖先组件中修改了传递的值,后代组件中是不会改变的
//提供者
provide(){
return {
属性名:属性值,
}
}
//注入:
inject:["属性名","属性名","属性名",xxxxx]
祖先组件: 提供者
<template>
<div class="TongXingFuZuJian">
<button @click="changeMsg1">改变message1的数据</button>
<p>{{ message1 }}</p>
</div>
</template>
<script>
import TongXinZi from "@/components/TongXinZi";
export default {
name: "TongXingFuZuJian",
components: {TongXinZi},
data() {
return {
message1: "这是我传给后代组件的值",//没有响应
}
},
//提供者
provide() {
return {
message1: this.message1
}
},
methods: {
//改变message1的值,后代组件是不会改变的
changeMsg1() {
this.message1 = "我是更改后的数据"
}
}
}
</script>
后代组件:
<template>
<div class="TongXinSunZuJIan">
<h2>这是孙子组件</h2>
<p>{{message1}}</p>
</div>
</template>
<script>
export default {
name: "TongXinSunZuJIan",
data() {
return {}
},
inject: ["message1"],
}
</script>
如何变成可响应的呢?
方法1: 传入可响应的对象
//祖先组件
data() {
return {
grandPa: {
message1: "这是我传给后代组件的值"
}
}
},
provide() {
return {
grandPa: this.grandPa,//传入可响应的对象
}
},
//后代组件
<p>{{grandPa.message1}}</p>
inject: ["grandPa"],
方法2: 通过计算属性计算注入的值
//祖先组件
data() {
return {
age: 5,
}
},
provide() {
return {
age: () => this.age//通过计算属性计算注入的值
}
}
//后代组件
<p>{{ newAge }}</p>
inject: ["age"],
computed: {
newAge() {
return this.age()
}
}
4、ref/$refs
链接: vue中ref的作用
5、 c h i l d r e n 、 children、 children、parent
链接: vue中父子组件之间的访问方式- c h i l d r e n − children- children−refs-$parent
6、vuex
链接: vue2全家桶-vuex