欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年11月26日 16:28:30   作者：你的美，讓我癡迷  
vue3中引入新的組件傳值方式,就是provide/inject依賴注入模式,本文主要介紹了vue3+ts 依賴注入provide inject的用法,感興趣的可以了解一下

父級(jí)：

<template>
  <div>
    <h1>App.vue (爺爺級(jí)別)</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>

兒子級(jí)別：

<template lang="html">
  <div>
    <h1>provideA.vue(兒子級(jí)別)</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>

孫子級(jí)：

<template lang="html">
  <div>
    <h1>provideA.vue(孫子級(jí)別)</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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論