【Vue2/3】使用Provide/Inject 依赖注入跨组件通信

历史小剧场

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

前言

  • 在组件嵌套多层情况下,不论组件嵌套多深,父组件都可以通过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()方法去包裹。如此,在子组件中去修改就修改不了了,否则的话,是可以修改的。这样,对以后项目的数据维护不友好

相关推荐

  1. Vue2/3】使用Provide/Inject 依赖注入组件通信

    2024-06-09 17:42:02       8 阅读
  2. Vue3组合式-依赖注入provide&&inject

    2024-06-09 17:42:02       29 阅读
  3. Vue3 组合式 API:依赖注入(四)

    2024-06-09 17:42:02       3 阅读

最近更新

  1. Leetcode 415. 字符串相加-大数相加

    2024-06-09 17:42:02       0 阅读
  2. Docker使用心得

    2024-06-09 17:42:02       0 阅读
  3. 富格林:细心发现虚假确保安全

    2024-06-09 17:42:02       0 阅读
  4. 解析文字示例

    2024-06-09 17:42:02       0 阅读
  5. 计算机系统结构期末复习

    2024-06-09 17:42:02       0 阅读
  6. C#中[StructLayout(LayoutKind.Sequential, Pack = 1)]解释

    2024-06-09 17:42:02       0 阅读
  7. MySQL 保姆级教程(八):创建计算字段

    2024-06-09 17:42:02       0 阅读

热门阅读

  1. Web前端答辩PPT模板:全面解析与高效呈现

    2024-06-09 17:42:02       6 阅读
  2. Vue3图片懒加载封装自定义指令

    2024-06-09 17:42:02       6 阅读
  3. C语言——共用体

    2024-06-09 17:42:02       7 阅读
  4. Docker:镜像命令和容器命令

    2024-06-09 17:42:02       6 阅读
  5. Spring boot SSL证书路径配置

    2024-06-09 17:42:02       8 阅读
  6. MyBatis 延迟加载,一级缓存,二级缓存设置

    2024-06-09 17:42:02       7 阅读
  7. 在 Linux 系统上安装 Android NDK

    2024-06-09 17:42:02       8 阅读
  8. Redis的哨兵机制,一文全解

    2024-06-09 17:42:02       5 阅读
  9. 07.组件间通信-provide-inject(祖孙通信)

    2024-06-09 17:42:02       6 阅读
  10. 常见知识点总结

    2024-06-09 17:42:02       7 阅读