vue2中可以通过 props实现父子组件间传值
而vue3的provide则是进一步强化了这个功能
我们先创建一个vue3项目
然后在src下的components下再创建一个 components文件夹 里面创建一个index.vue文件
然后找到src下的App.vue 编写代码如下
<template>
<div class="containers">
<el-button @click = "setTitle">触发</el-button>
<hello-world :title = "title"></hello-world>
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld";
import { ref,provide } from "vue";
export default {
components: {
HelloWorld
},
setup(){
let title = ref("App数据标题");
let setTitle = () => {
title.value = "组件示范";
}
provide("title",title);
return {
title,
setTitle
}
}
}
</script>
<style lang="scss">
</style>
这里我们引入了src下的 components 下的HelloWorld
然后通过ref声明了一个响应式变量title
然后定义类一个方法 setTitle 动态改变title的值 最后 将这个方法和变量返回给组件
然后找到 src下的 components 下的HelloWorld组件
编写代码如下
<template>
<teleport to = "#app">
<index></index>
</teleport>
</template>
<script>
import index from "./components/index";
export default {
components: {
index
},
}
</script>
<style scoped>
</style>
因为HelloWorld本身就在components下 所有 ./就是在拿和自己平级的目录 所以 这里的 ./components/index
就是在拿我们一开始写的 src下的 components下的 components 下的 index.vue
那么 我们在 src下的 components下的 components 下的 index.vue 编写代码如下
<template>
<div>{{ title }}</div>
</template>
<script>
import { inject } from "vue";
export default {
setup(){
let title = inject("title");
return {
title
}
}
}
</script>
<style scoped>
</style>
我们这里用的inject就是在获取之前 App.vue中定义在provide中的变量
可以看到 我们 index组件中的title被成功输出 而这边变量是App.vue传递的 我们再点一下触发 触发一下App.vue的setTitle改变一下这个title 看看这个index组件的数据会不会动态改变
也是成功的改变了
我们可以明显看到
他们的父子关系是 App.vue HelloWorld.vue index.vue
所以说 provide是传给了自己所有的后代元素 不在受层级的限制 比 原来的父子传值要强大许多