废话
本篇重点单独说一下，composition Api 新增的组件通信，重点后面用的比较多,他就是Provide/Inject，翻译是提供/注入，看到这两个关键词的时候你第一想到的是啥，我直接想到了React的createContext，都是创建一个上下文的容器，他的关键词是Provider/Consumer,翻译是生产者/消费者，然后看了下vue的文档介绍，哈哈哈简直就是一个东西，不多说，直接上demo
正文
provide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 setup() 函数中使用。父级组件中使用 provide() 函数向下传递数据；子级组件中使用 inject() 获取上层传递过来的数据。
我们先新建两个文件，去试一下
chidl.vue
<template>
<div>
<h4>我是子组件自己的内容</h4>
<hr>
<h4>我是父组件给的内容</h4>
<div>
<p>id:{
{id}}</p>
<p>姓名:{
{name}}</p>
<p>内容:{
{content}}</p>
</div>
<h4>我是父组件的方法</h4>
<button @click="changeName">点击改变名字</button>
</div>
</template>
<script>
import { inject,toRefs } from 'vue'
export default {
setup () {
const dataObj = inject('options')
const changeName = inject('editName')
return {
...toRefs(dataObj),
changeName
}
},
}
</script>
<style lang='less' scoped>
</style>
parent.vue
<template>
<div>
<Child />
</div>
</template>
<script>
import Child from '../components/child.vue'
import { reactive, provide,toRefs } from 'vue'
export default {
components:{
Child
},
setup () {
const data = reactive({
id:'123',
content:'我是父组件的响应内容',
name:'我是姓名'
})
const editName = ()=>{
data.name = '我改变了名字'
}
provide('options',data)
provide('editName',editName)
return {
...toRefs(data),
editName
}
},
}
</script>
<style lang='less' scoped>
</style>
app.vue 加上路由跳转
<router-link to="/provideInject">provideInject</router-link>
router.js 添加路由
或者按照绿框里的写法都行
运行结果
重点分析
1、提供信息的是要provide()，接收信息的的用 inject()，接收的可以是变量和方法
2、provide 函数允许你通过两个参数定义 property
3、inject 函数有两个参数
- 要注入的 property 的名称
- 一个默认的值 (可选)
4、可以提供相应数据，使用 ref 或 reactive
5、当使用响应式提供/注入值时，建议尽可能，在提供者内保持响应式 property 的任何更改，
就是在父组件添加修改方法，提供给子组件，在子组件里直接使用
6、如果只提供可读数据，可以结合readonly使用
补充
props父组件传值
setup 直接可以接收到
提示
1、sutep里用了什么api，都要引入
import { xxx, xxx, xxx} from 'vue'
2、sutep里定义了什么变量方法，都要写在return里
3、修改代码之后，去掉某些api,变量，或者方法了，也要在import，return中相应去掉
4、养成良好的代码规范习惯，免得报错