vue3.0透?jìng)鲗傩院褪录氖褂梅绞脚e例

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

這篇文章主要給大家介紹了關(guān)于vue3.0透?jìng)鲗傩院褪录褂玫南嚓P(guān)資料,透?jìng)鱝ttribute指的是傳遞給一個(gè)組件,卻沒有被該組件聲明為props或emits的attribute或者v-on事件監(jiān)聽器,需要的朋友可以參考下

如何“透?jìng)鲗傩院褪录?rdquo;

父組件在使用子組件的時(shí)候，如何“透?jìng)鲗傩院褪录?rdquo;給子組件呢？

透?jìng)鲗傩院褪录]有在子組件中用props和emits聲明
透?jìng)鲗傩院褪录畛Ｒ姷娜?code>@click和class、id、style
當(dāng)子組件只有一個(gè)根元素時(shí)，透?jìng)鲗傩院褪录?huì)自動(dòng)添加到該根元素上；如果根元素已有class或style屬性，它會(huì)自動(dòng)合并

組合式API測(cè)試：

父組件App.vue

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

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

<template>
    <!-- 透?jìng)鞯膶傩裕╯tyle，class，title）在子組件中并沒有在 props 聲明 -->
    <!-- 透?jìng)鞯氖录╟lick）在子組件中并沒有在 emits 聲明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="紙片"
        @click="say"
    />
</template>

子組件 Chip.vue

<template>
    <!-- 
        當(dāng)子組件只有一個(gè)根元素時(shí)，透?jìng)鲗傩院褪录?huì)自動(dòng)添加到該根元素上
        如果根元素已有 class 或 style 屬性，它會(huì)自動(dòng)合并
     -->
    <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é)果：

如何禁止“透?jìng)鲗傩院褪录?rdquo;

當(dāng)子組件只有一個(gè)根元素時(shí)，透?jìng)鲗傩院褪录?huì)自動(dòng)添加到該根元素上，那怎么阻止呢？
在選項(xiàng)式 API 中，你可以在組件選項(xiàng)中設(shè)置inheritAttrs: false來阻止；
在組合式 API 的<script setup>中，你需要一個(gè)額外的<script>塊來書寫inheritAttrs: false選項(xiàng)聲明來禁止

組合式API測(cè)試：

父組件App.vue

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

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

<template>
    <!-- 透?jìng)鞯膶傩裕╯tyle，class，title）在子組件中并沒有在 props 聲明 -->
    <!-- 透?jìng)鞯氖录╟lick）在子組件中并沒有在 emits 聲明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="紙片"
        @click="say"
    />
</template>

子組件 Chip.vue

<script>
export default {
    inheritAttrs: false // 阻止自動(dòng)透?jìng)鹘o唯一的根組件
}
</script>

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

<template>
    <!-- 
        當(dāng)子組件只有一個(gè)根元素時(shí)，透?jìng)鲗傩院褪录?huì)自動(dòng)添加到該根元素上
        如果根元素已有 class 或 style 屬性，它會(huì)自動(dòng)合并
     -->
    <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>

多根元素的“透?jìng)鲗傩院褪录?rdquo;

多根節(jié)點(diǎn)的組件并沒有自動(dòng)“透?jìng)鲗傩院褪录?rdquo;的行為，由于Vue不確定要將“透?jìng)鲗傩院褪录?rdquo;透?jìng)鞯侥睦?，所以我們需?code>v-bind="$attrs"來顯式綁定，否則將會(huì)拋出一個(gè)運(yùn)行時(shí)警告。

組合式API測(cè)試：

父組件App.vue

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

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

<template>
    <!-- 透?jìng)鞯膶傩裕╯tyle，class，title）在子組件中并沒有在 props 聲明 -->
    <!-- 透?jìng)鞯氖录╟lick）在子組件中并沒有在 emits 聲明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="紙片"
        @click="say"
    />
</template>

子組件Chip.vue

<template>
    <!-- 多根節(jié)點(diǎn)的組件并沒有自動(dòng)“透?jìng)鲗傩院褪录钡男袨?-->
    <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>

訪問“透?jìng)鲗傩院褪录?rdquo;

在選項(xiàng)式 API 中，我們可通過this.$attrs來訪問“透?jìng)鲗傩院褪录?rdquo;
在組合式 API 中的<script setup>中引入useAttrs()來訪問一個(gè)組件的“透?jìng)鲗傩院褪录?rdquo;

組合式API測(cè)試：

父組件App.vue

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

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

<template>
    <!-- 透?jìng)鞯膶傩裕╯tyle，class，title）在子組件中并沒有在 props 聲明 -->
    <!-- 透?jìng)鞯氖录╟lick）在子組件中并沒有在 emits 聲明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="紙片"
        @click="say"
    />
</template>

子組件Chip.vue

<script setup>
import { useAttrs } from 'vue';
// 透?jìng)鞯膶傩院褪录?duì)象
let attrs = useAttrs()
 // 在 JS 中訪問透?jìng)鞯膶傩院褪录?
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í)行透?jìng)鞯氖录?lt;/button>
    <hr>
    <button @click="showAttrs">在 JS 中訪問透?jìng)鞯膶傩院褪录?lt;/button>
</template>
<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
    margin: 10px;
}
.rounded {
    border-radius: 100px;
}
</style>

注意：

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