vue3 provide 与 inject

本文主要是介绍vue3 provide 与 inject，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

provide和inject提供依赖注入，功能类似 2.x 的provide/inject

实现跨层级组件(祖孙)间通信

父

<template>
  <h1>父组件</h1>
  <p>当前颜色: {{color}}</p>
  <button @click="color='red'">红</button>
  <button @click="color='yellow'">黄</button>
  <button @click="color='blue'">蓝</button>
  
  <hr>
  <Son />
</template>

<script lang="ts">
import { provide, ref } from 'vue'
/* 
- provide` 和 `inject` 提供依赖注入，功能类似 2.x 的 `provide/inject
- 实现跨层级组件(祖孙)间通信
*/

import Son from './Son.vue'
export default {
  name: 'ProvideInject',
  components: {
    Son
  },
  setup() {
    
    const color = ref('red')

    provide('color', color)

    return {
      color
    }
  }
}
</script>
<template>
  <div>
    <h2>子组件</h2>
    <hr>
    <GrandSon />
  </div>
</template>

<script lang="ts">
import GrandSon from './GrandSon.vue'
export default {
  components: {
    GrandSon
  },
}
</script>

<template>
  <h3 :style="{color}">孙子组件: {{color}}</h3>
  
</template>

<script lang="ts">
import { inject } from 'vue'
export default {
  setup() {
    const color = inject('color')

    return {
      color
    }
  }
}
</script>

　其实在子组件中也可以获取的到

有的类似于uni.$emit于uni.$on的功能

这篇关于vue3 provide 与 inject的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！