vue3 非父子组件通信详解
程序员文章站
2022-03-24 08:07:45
目录app.vuehome.vuehomecontent.vue修改响应式property业务场景是，不是父子组件实现通信文件目录第一种方法app.vue
业务场景是，不是父子组件实现通信
文件目录
第一种方法
app.vue
<template>
<div>
<home></home>
<button @click="addname">增加名字</button>
</div>
</template>
<script>
import home from "./home.vue";
import { computed } from "vue";
export default {
name: "app",
components: {
home,
},
provide() {
return {
name: "张三",
age: 23,
length: computed(() => this.names.length),
};
},
data() {
return {
names: ["张三", "李四", "王五"],
};
},
methods: {
addname() {
this.names.push("fuck you");
console.log("hhhh");
},
},
};
</script>
<style scoped>
</style>
home.vue
<template>
<div>
<div>我是home</div>
<home-content></home-content>
</div>
</template>
<script>
import homecontent from "./homecontent.vue";
export default {
name: "home",
components: {
homecontent,
},
};
</script>
<style scoped>
</style>
homecontent.vue
<template>
<div>homecontent:{{ name }}--{{ age }}---{{ length }}</div>
</template>
<script>
export default {
inject: ["name", "age", "length"],
};
</script>
<style lang="scss" scoped>
</style>
vue3中使用provide函数和inject函数
事实上我们之前还学习过provide和inject，composition api也可以替代之前的 provide 和 inject 的选项。
我们可以通过 provide来提供数据：
provide可以传入两个参数：
name：提供的属性名称；
value：提供的属性值；
在 后代组件 中可以通过 inject 来注入需要的属性和对应的值：
可以通过 inject 来注入需要的内容；
inject可以传入两个参数：
要 inject 的 property 的 name；
默认值；
数据的响应式
为了增加 provide 值和 inject 值之间的响应性，我们可以在 provide 值时使用 ref 和 reactive。
修改响应式property
如果我们需要修改可响应的数据，那么最好是在数据提供的位置来修改：我们可以将修改方法进行共享，在后代组件中进行调用；
注意
如果我们子组件应该是只能使用，不能修改的状态
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容！