27.provide和inject

事实上我们之前还学习过Provide和Inject，Composition API也可以替代之前的 Provide 和 Inject 的选项。

我们可以通过 provide来提供数据：

• 可以通过 provide 方法来定义每个 Property；

在 后代组件 中可以通过 inject 来注入需要的属性和对应的值：

• 可以通过 inject 来注入需要的内容；

provide可以传入两个参数：

• name：提供的属性名称；
• value：提供的属性值；

inject可以传入两个参数：

• 要 inject 的 property 的 name；
• 默认值(可选)；

基本用法

下面的用法，数据不是响应式的，更改App.vue中的count的值，Home.vue中通过inject获取的数据并不会响应式更新
App.vue

<template>
  <div>
    <home />
    <button @click="increment">+1</button>
  </div>
</template>

<script>
  import Home from './Home.vue'
  import {provide} from 'vue'
  export default {
    components: {
      Home
    },
    setup() {
      let name = 'coderwhy'
      let count = 0

      provide('name',name)
      provide('count',count)

      const increment = () => count++

      return {
        name,
        count,
        increment
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

Home.vue

<template>
  <div>
    <h1>计数： {{count}}</h1>
  </div>
</template>

<script>
  import {inject} from 'vue'
  export default {
    setup() {
      let name = inject('name')
      let count = inject('count')

      return {
        name, 
        count
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

provide提供响应式数据

这种写法，App.vue提供给后代组件的数据是响应式的，App.vue中的变量值改变，子组件中数据响应式更新，
但是子组件不仅可以使用数据，也可以更新数据的值，不遵循项目单项数据流的规则
App.vue

<template>
  <div>
    <home />
    <button @click="increment">app:+1</button>
  </div>
</template>

<script>
  import Home from './Home.vue'
  import {ref,  provide} from 'vue'
  export default {
    components: {
      Home
    },
    setup() {
      let name = ref('coderwhy')
      let count = ref(0)

      provide('name', name)
      provide('count',count)

      const increment = () => count.value++

      return {
        name,
        count,
        increment
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

Home.vue

<template>
  <div>
    <h1>计数： {{count}}</h1>
    <button @click="increment">home:+1</button>
  </div>
</template>

<script>
  import {inject} from 'vue'
  export default {
    setup() {
      let name = inject('name')
      let count = inject('count')
      const increment = () => count.value++
      return {
        name, 
        count,
        increment
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

provide提供响应式数据,结合readonly使用，子组件只可以使用，不可以修改

App.vue

<template>
  <div>
    <home />
    <button @click="increment">+1</button>
  </div>
</template>

<script>
  import Home from './Home.vue'
  import {ref, readonly, provide} from 'vue'
  export default {
    components: {
      Home
    },
    setup() {
      let name = ref('coderwhy')
      let count = ref(0)

      provide('name', readonly(name))
      provide('count',readonly(count))

      const increment = () => count.value++

      return {
        name,
        count,
        increment
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

Home.vue

<template>
  <div>
    <h1>计数： {{count}}</h1>
  </div>
</template>

<script>
  import {inject} from 'vue'
  export default {
    setup() {
      let name = inject('name')
      let count = inject('count')

      return {
        name, 
        count
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

修改响应式Property

如果我们需要修改可响应的数据，那么最好是在数据提供的位置来修改：

• 我们可以将修改方法进行共享，在后代组件中进行调用；

const changeInfo = (value) =>  {
  info.name = value
}
provide("changeInfo", changeInfo)

此文档主要内容来源于王红元老师的vue3+ts视频教程