开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 17 天，点击查看活动详情

说点题外话

之前用了很多章介绍了父子组件通信：

选项式父组件向子组件传参

选项式父子非props组件通信

选项式子组件向父组件传参

组合式子组件向父组件传参

上一篇说的是选项式非父子组件

和Vue3和解的Day16--非父子组件通信

说正文

选项式

上一篇中我留下了一个悬念，在这里接着说，我们先看看上一篇留下的效果

这里状态栏中的三个数据是方法里打印的this.names.length, 我们又发现了一个新的问题，初始化的length我们获取到并且展示了，但是我们新增的数据没有添加到数据中，让我们达到我们想要的效果，因为目前我们的写法是一次性数据，我们可以借用computed计算属性来实现响应式数据

  provide() {
    return {
      length: computed(() => this.names.length)
    }
  },

组合式非父子组件通信

选项式的我们详细的说了用法，其实组合式的setup函数provide和选项式的provide很相近，但是提供和注入的方法哟咻额区别，setup函数形式和setup语法糖形式中provide和inject使用方法一样，这里就直接拿setup语法糖形式展示了

组合式中的provide需要引入才能使用

provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

App.vue

<template>
  <div>
    <home></home>
</div>
</template>

<script setup>
import Home from './Home.vue';
import { ref, provide } from 'vue';

const name = ref("小白")
provide("name", name)
</script>

HomeContent.vue

<template>
  <div>
    <h2>{{ name }}</h2>
</div>
</template>

<script setup>

import { inject } from 'vue';
const name = inject("name")


</script>

此时我们数据会正常显示，以下说一些补充知识点。

1. 注入默认值

const name = inject("name" , "默认值")

2. 提供方改变数据

如果我们如上文说的一样，在提供方改变数据，并且提供方视口可以一个key传递一个对象呢？

App.vue

<template>
  <div>
    <home></home>
    <button @click="changeClick">点击切换</button>
</div>
</template>

<script setup>
import Home from './Home.vue';
import { ref, provide } from 'vue';

const name = ref("小白")
provide("name", name)

const changeClick = () => name.value = "小刚"

</script>

注入方的代码没有变化，这里不再重复展示

3. provide传递一个对象

这里我就直接展示提供方和注入方的代码

App.vue

const name = ref("小白")
const age = ref(18)
provide("user", {
  name,
  age
})

HomeContent.vue

    <h2>{{ user.name }}</h2>
    <h2>{{ user.age }}</h2>

<script setup>

import { inject } from 'vue';
const user = inject("user")

这里还可以使用解构的方法

const {name, age} = inject('user')

name和age属性就可以直接展示使用

说再见

关于非父子组件通信使用provide和inject方法的介绍就说到这里

难忘今宵

有一天，白气球遇到黑气球，一见面白气球二话不说就打了黑气球。

黑气球非常生气于是，它做了一个决定：告白气球！

和Vue3和解的Day17--非父子组件通信