vue3.0透傳屬性和事件的使用方式舉例

更新時間：2024年01月20日 09:39:31 作者：A小博.

這篇文章主要給大家介紹了關(guān)于vue3.0透傳屬性和事件使用的相關(guān)資料,透傳attribute指的是傳遞給一個組件,卻沒有被該組件聲明為props或emits的attribute或者v-on事件監(jiān)聽器,需要的朋友可以參考下

如何“透傳屬性和事件”

父組件在使用子組件的時候，如何“透傳屬性和事件”給子組件呢？

透傳屬性和事件并沒有在子組件中用props和emits聲明
透傳屬性和事件最常見的如@click和class、id、style
當(dāng)子組件只有一個根元素時，透傳屬性和事件會自動添加到該根元素上；如果根元素已有class或style屬性，它會自動合并

組合式API測試：

父組件App.vue

<script setup>
import ChipVue from './components/Chip.vue';

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透傳的屬性（style，class，title）在子組件中并沒有在 props 聲明 -->
    <!-- 透傳的事件（click）在子組件中并沒有在 emits 聲明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="紙片"
        @click="say"
    />
</template>

子組件 Chip.vue

<template>
    <!-- 
        當(dāng)子組件只有一個根元素時，透傳屬性和事件會自動添加到該根元素上
        如果根元素已有 class 或 style 屬性，它會自動合并
     -->
    <button class="chip" style="box-shadow: 0 0 8px grey;">
        普通紙片
    </button>
</template>

<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
}

.rounded {
    border-radius: 100px;
}
</style>

渲染結(jié)果：

如何禁止“透傳屬性和事件”

當(dāng)子組件只有一個根元素時，透傳屬性和事件會自動添加到該根元素上，那怎么阻止呢？
在選項式 API 中，你可以在組件選項中設(shè)置inheritAttrs: false來阻止；
在組合式 API 的<script setup>中，你需要一個額外的<script>塊來書寫inheritAttrs: false選項聲明來禁止

組合式API測試：

父組件App.vue

<script setup>
import ChipVue from './components/Chip.vue';

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透傳的屬性（style，class，title）在子組件中并沒有在 props 聲明 -->
    <!-- 透傳的事件（click）在子組件中并沒有在 emits 聲明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="紙片"
        @click="say"
    />
</template>

子組件 Chip.vue

<script>
export default {
    inheritAttrs: false // 阻止自動透傳給唯一的根組件
}
</script>

<!-- 
    在組合式 API 的 <script setup> 中，
    你需要一個額外的 <script> 塊來書寫 inheritAttrs: false 選項聲明來禁止 
-->
<script setup></script>

<template>
    <!-- 
        當(dāng)子組件只有一個根元素時，透傳屬性和事件會自動添加到該根元素上
        如果根元素已有 class 或 style 屬性，它會自動合并
     -->
    <button class="chip" style="box-shadow: 0 0 8px grey;">
        普通紙片
    </button>
</template>

<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
}

.rounded {
    border-radius: 100px;
}
</style>

多根元素的“透傳屬性和事件”

多根節(jié)點(diǎn)的組件并沒有自動“透傳屬性和事件”的行為，由于Vue不確定要將“透傳屬性和事件”透傳到哪里，所以我們需要v-bind="$attrs"來顯式綁定，否則將會拋出一個運(yùn)行時警告。

組合式API測試：

父組件App.vue

<script setup>
import ChipVue from './components/Chip.vue';

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透傳的屬性（style，class，title）在子組件中并沒有在 props 聲明 -->
    <!-- 透傳的事件（click）在子組件中并沒有在 emits 聲明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="紙片"
        @click="say"
    />
</template>

子組件Chip.vue

<template>
    <!-- 多根節(jié)點(diǎn)的組件并沒有自動“透傳屬性和事件”的行為 -->
    <button class="chip">
        普通紙片
    </button>
    <hr>
    <button class="chip" v-bind="$attrs">
        普通紙片
    </button>
    <hr>
    <button class="chip" v-bind="$attrs">
        普通紙片
    </button>
</template>
<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
}
.rounded {
    border-radius: 100px;
}
</style>

訪問“透傳屬性和事件”

在選項式 API 中，我們可通過this.$attrs來訪問“透傳屬性和事件”
在組合式 API 中的<script setup>中引入useAttrs()來訪問一個組件的“透傳屬性和事件”

組合式API測試：

父組件App.vue

<script setup>
import ChipVue from './components/Chip.vue';

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透傳的屬性（style，class，title）在子組件中并沒有在 props 聲明 -->
    <!-- 透傳的事件（click）在子組件中并沒有在 emits 聲明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="紙片"
        @click="say"
    />
</template>

子組件Chip.vue

<script setup>
import { useAttrs } from 'vue';
// 透傳的屬性和事件對象
let attrs = useAttrs()
 // 在 JS 中訪問透傳的屬性和事件
function showAttrs() {
    console.log(attrs)
    console.log(attrs.class)
    console.log(attrs.title)
    console.log(attrs.style)
    attrs.onClick()
}
</script>
<template>
    <button class="chip" v-bind="attrs">
        普通紙片
    </button>
    <hr>
    <h6>{{ attrs }}</h6>
    <ul>
        <li>{{ attrs.title }}</li>
        <li>{{ attrs.class }}</li>
        <li>{{ attrs.style }}</li>
    </ul>
    <button @click="attrs.onClick()">執(zhí)行透傳的事件</button>
    <hr>
    <button @click="showAttrs">在 JS 中訪問透傳的屬性和事件</button>
</template>
<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
    margin: 10px;
}
.rounded {
    border-radius: 100px;
}
</style>

注意：

雖然這里的attrs對象總是反映為最新的“透傳屬性和事件”，但它并不是響應(yīng)式的 (考慮到性能因素)，你不能通過偵聽器去監(jiān)聽它的變化
如果你需要響應(yīng)性，可以使用prop或者你也可以使用onUpdated()使得在每次更新時結(jié)合最新的attrs執(zhí)行副作用