非父子组件通信（父传孙）
父组件传递给孙组件：通过provide/inject来共享数据。
在一些深度嵌套的场景中，子组件要想获取父组件里面的部分数据，可以使用props逐级传递的方法，但这样会显得非常麻烦。所以在这种场景下，一般父组件使用provide来提供数据，而子孙组件使用inject来使用父组件提供的数据。
一般使用
三个组件，app.vue home.vue homecontent.vue，这三个为层层嵌套关系。
""" app.vue """
<template>
<home/>
</template>
<script>
import Home from "./home";
export default {
name: "App",
components: {Home},
}
</script>
""" home.vue """
<template>
<homecontent/>
</template>
<script>
import Homecontent from "./homecontent";
export default {
name: "home",
components: {Homecontent}
}
</script>
""" homecontent.vue """
<template>
<div>
孙组件
</div>
</template>
<script>
export default {
name: "homecontent"
}
</script>
在父组件中使用provide来定义数据。
""" app.vue 父组件 """
<template>
<home/>
</template>
<script>
import Home from "./home";
export default {
name: "App",
components: {Home},
provide: {
name: "xxcfun",
age: "18"
}
}
</script>
在孙组件中使用inject来使用这些数据。
""" homecontent.vue 孙组件 """
<template>
<div>
孙组件 <br/>
{{name}} - {{age}}
</div>
</template>
<script>
export default {
name: "homecontent",
inject: ["name", "age"]
}
</script>
这样就能实现非父子组件之间共享数据：
zjtxfs.png
拓展用法
- 使用data定义的数据
如果在父组件中想使用data里面定义的数据，直接在provide中使用this来指向data数据是行不通的，在provide作用域里面是拿不到data数据的，会出现undefined的情况。
如果有这样的需求，得在provide中做下修改，把对象数据改为函数返回对象的格式。
""" app.vue """
<template>
<home/>
</template>
<script>
import Home from "./home";
export default {
name: "App",
components: {Home},
provide() {
return {
name: "xxcfun",
age: "18",
hobby: this.hobby,
hobbynum: this.hobby.length
}
},
data() {
return {
hobby: ["football", "bike"]
}
}
}
</script>
""" homecontent.vue """
<template>
<div>
孙组件 <br/>
{{name}} - {{age}} <br/>
{{hobby}} - {{hobbynum}}
</div>
</template>
<script>
export default {
name: "homecontent",
inject: ["name", "age", "hobby", "hobbynum"]
}
</script>
zjtxdata.png
- 使用响应式数据
在父组件中添加一个点击事件，增加一个hobby。
""" app.vue """
<template>
<home/>
<button @click="addHobby">添加一个hobby</button>
</template>
<script>
import Home from "./home";
export default {
name: "App",
components: {Home},
provide() {
return {
name: "xxcfun",
age: "18",
hobby: this.hobby,
hobbynum: this.hobby.length
}
},
data() {
return {
hobby: ["football", "bike"]
}
},
methods: {
addHobby() {
this.hobby.push("games")
}
}
}
</script>
在点击一次按钮后，会发现孙组件hobby的内容添加上了games，但后面的长度还是显示2。
zjtxerro.png
有这样的需求的话，这里得需要用到一个计算属性，每次hobby改变的时候，length也实时进行计算。
""" app.vue """
<template>
<home/>
<button @click="addHobby">添加一个hobby</button>
</template>
<script>
import Home from "./home";
import { computed } from "vue";
export default {
name: "App",
components: {Home},
provide() {
return {
name: "xxcfun",
age: "18",
hobby: this.hobby,
hobbynum: computed(() => this.hobby.length)
}
},
data() {
return {
hobby: ["football", "bike"]
}
},
methods: {
addHobby() {
this.hobby.push("games")
}
}
}
</script>
这样点击两次后，增加了两个games，后面的数量也变成了4。
zjtxcom.png
~END
