快捷導航

vue3+ts 依賴注入provide inject的用法

更新時間：2023年11月26日 16:28:30 作者：你的美，讓我癡迷

vue3中引入新的組件傳值方式,就是provide/inject依賴注入模式,本文主要介紹了vue3+ts 依賴注入provide inject的用法,感興趣的可以了解一下

父級：

<template>
  <div>
    <h1>App.vue (爺爺級別)</h1>
    <label>
      <input type="radio" v-model="colorVal" value="red" name="color" />
      紅色
    </label>
    <label>
      <input type="radio" v-model="colorVal" value="pink" name="color" />
      粉色
    </label>
    <label>
      <input type="radio" v-model="colorVal" value="yellow" name="color" />
      黃色
    </label>
    <div class="box"></div>
    <hr />
    <provideAVue></provideAVue>
  </div>
</template>

<script setup lang="ts">
import { ref, provide } from "vue";
import provideAVue from "./components/provideA.vue";
const colorVal = ref<string>("red");
provide("color", colorVal);
</script>

<style>
.box {
  height: 50px;
  width: 50px;
  border: 1px solid #ccc;
  background: v-bind(colorVal);
}
</style>

兒子級別：

<template lang="html">
  <div>
    <h1>provideA.vue(兒子級別)</h1>
    <div class="box"></div>
    <hr />
    <provideBVue></provideBVue>
  </div>
</template>
<script lang="ts" setup>
import { inject } from "vue";
import type { Ref } from "vue";
import provideBVue from "./provideB.vue";
const color = inject<Ref<string>>("color");
</script>
<style lang="scss">
.box {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  background: v-bind(color);
}
</style>

孫子級：

<template lang="html">
  <div>
    <h1>provideA.vue(孫子級別)</h1>
    <div>
      <button @click="change">修改 provide的值 yellow</button>
    </div>
    <div class="box"></div>
    <hr />
  </div>
</template>
<script lang="ts" setup>
import { inject } from "vue";
import type { Ref } from "vue";
const color = inject<Ref<string>>("color");
const change = () => {
  color!.value = "yellow";
};
</script>
<style lang="scss">
.box {
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  background: v-bind(color);
}
</style>

效果圖

到此這篇關(guān)于vue3+ts 依賴注入provide inject的用法的文章就介紹到這了,更多相關(guān)vue3 ts 依賴注入內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue 項目接口管理的實現(xiàn)
在vue開發(fā)中，會涉及到很多接口的處理，當項目足夠大時，就需要定義規(guī)范統(tǒng)一的接口，本文就來介紹一下vue 項目接口管理，具有一定的參考價值，感興趣的小伙伴可以一起來了解一下
2019-01-01
解析vue的provide和inject使用方法及其原理
這篇文章主要介紹了vue的provide和inject使用方法及其原理,本文通過源碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-10-10
Vue?中生命周期定義及流程
這篇文章主要介紹了Vue中生命周期定義及流程，生命周期又被稱為生命周期回調(diào)函數(shù)、生命周期函數(shù)或生命周期鉤子，下文關(guān)于其更多有趣的介紹需要的小伙伴可以參考一下文章詳細內(nèi)容
2022-05-05
Vue3（三）網(wǎng)站首頁布局開發(fā)
這篇文章主要介紹了Vue3網(wǎng)站首頁布局開發(fā)，上篇文章已經(jīng)提到集成Ant Design Vue后，和Element Ui一樣，還是組件的使用，接下倆我們就來看看Vue3網(wǎng)站首頁布局開發(fā)的相關(guān)資料,需要的朋友可以參考下面文章的具體內(nèi)容
2021-10-10
vue實現(xiàn)選項卡小案例
這篇文章主要為大家詳細介紹了vue實現(xiàn)選項卡小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
使用vue進行Lodop打印的一些常用方法小結(jié)
這篇文章主要給大家介紹了關(guān)于使用vue進行Lodop打印的一些常用方法,需要進行打印功能,Lodop就是實現(xiàn)需求的插件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-07-07
vue style width a href動態(tài)拼接問題的解決
這篇文章主要介紹了vue style width a href動態(tài)拼接問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue實現(xiàn)導出Word文件(數(shù)據(jù)流方式)
這篇文章主要介紹了vue實現(xiàn)導出Word文件(數(shù)據(jù)流方式)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue中使用icon的幾種常用方法
這篇文章主要給大家介紹了關(guān)于Vue中使用icon的幾種常用方法,icon圖標的使用 Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應(yīng)該要熟練的掌握它,需要的朋友可以參考下
2023-07-07
詳解用vue編寫彈出框組件
本篇文章主要介紹了詳解用vue編寫彈出框組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07