从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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值