历史小剧场

什么东西，都有使用年限，比如大米、王朝。
不同的是，大米的年限看得见，王朝的年限看不见。看不见，却依然存在。对于气数，崇祯是不信的，开始不信。等到崇祯十四年，怕什么来什么，后院起火，前院也起火，卢象昇死了，辽东白了，中原乱了，信了。

前言

• 在组件嵌套多层情况下，不论组件嵌套多深，父组件都可以通过provide来提供数据，子组件或孙组件或曾孙组件使用inject注入数据。
• 还有，在兄弟组件之间传值也很方便。

Vue2-OptionsAPI使用

什么是optionsAPI？

我的理解就是，像一个对象里面的属性方法都算是optionsAPI，所以，在Vue2中都是以这样的格式来编写代码的。

案例

App.vue

export default {provide: {// 丧失响应式name: '李四'},...
}

Father.vue

<template><div><TestProvideOptionsAPIChild /></div>
</template><script lang="ts">
import TestProvideOptionsAPIChild from './TestProvideOptionsAPIChild.vue';export default {name: "TestProvideOptionsAPIFather",components: {TestProvideOptionsAPIChild},
}
</script><style lang="scss" scoped></style>

TestProvideOptionsAPIChild.vue

<!--  -->
<template><div><h1>{{ name }}</h1></div>
</template><script lang="ts">
export default {name: "TestProvideOptionsAPIChild",inject: ["name"],
}
</script><style lang="scss" scoped></style>

Vue3-CompositionAPI使用

在组合式API中，我们需要在setup()函数期间调用，或者在setup 语法糖里使用，必须从vue显示导入provide/inject方法

案例

App.vue

export default {setup() {const name = ref<string>("张三")const changeName = () => {name.value = '王五'}// 使用readonly包裹，使其不可在子组件被修改provide('name', readonly(name))provide('age', 20)provide('sex', '男')provide('hobby', '跑步')provide("changeName", changeName)}...
}

Father.vue

<!--  -->
<template><div><TestProvideChild /></div>
</template><script setup lang="ts">
import TestProvideChild from './TestProvideChild.vue'
</script><style lang="scss" scoped></style>

TestProvideChild.vue

<!-- TestProvideChild.vue -->
<template><div><h1>{{ name }}</h1><h1>{{ age }}</h1><h1>{{ sex }}</h1><h1>{{ hobby }}</h1><button @click="changeName">修改姓名</button><br><button @click="injectChangeName">子组件修改姓名</button><br></div>
</template><script setup lang="ts">
import { inject } from 'vue';// inject() 方法第二个参数为默认值
let name = inject('name', ''),age = inject('age', 0),sex = inject('sex', 'unknown'),hobby = inject('hobby', ""),changeName = inject('changeName', () => {});const injectChangeName = () => {name.value = '心潮'
}
</script><style lang="scss" scoped></style>

【默认规则】当我们使用provide/inject来实现组件通信的时候，必须在父组件中去修改数据，在子组件不可以自行去修改数据，所以，我们可以在父组件中使用provide传递数据时可以将数据使用readonly()方法去包裹。如此，在子组件中去修改就修改不了了，否则的话，是可以修改的。这样，对以后项目的数据维护不友好