从0到1 搭建vue3.0项目 第四篇

废话

本篇重点单独说一下，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、养成良好的代码规范习惯，免得报错

下一篇

element3 less 安装使用

推荐文档

Provide/Inject