快捷導(dǎo)航

VUE3之Non-Props屬性的具體使用

更新時(shí)間：2022年01月23日 09:14:21 作者：追風(fēng)人聊Java

本文主要介紹了VUE3之Non-Props屬性的具體使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

2.1 初識(shí)Non-Props 屬性
2.2 不想把Non-Props 屬性渲染到最外層標(biāo)簽
2.3Non-Props 屬性的使用場(chǎng)景
2.4 子組件有多個(gè)最外層標(biāo)簽
2.5 為某個(gè)最外層標(biāo)簽渲染
2.6 獲取父組件傳遞的某一個(gè)屬性
2.7 生命周期函數(shù)獲取Non-Props 屬性

3. 綜述

1. 概述

墨菲定律告訴我們：人總是容易犯錯(cuò)誤的，無論科技發(fā)展到什么程度，無論是什么身份的人，錯(cuò)誤總是會(huì)在不經(jīng)意間發(fā)生。因此我們最好在做重要的事情時(shí)，盡量去預(yù)估所有可能發(fā)生的錯(cuò)誤，并思考錯(cuò)誤發(fā)生后的補(bǔ)救方案，再準(zhǔn)備一個(gè)或多個(gè)備選方案。這樣才能做到有備無患，防患于未來。

言歸正傳，之前我們聊了組件的傳參，今天我們來聊一下Non-Props 屬性，Non-Props 這個(gè)詞，不了解的同學(xué)一定覺得很高深，其實(shí)很簡(jiǎn)單，之前講的組件傳參，子組件會(huì)使用 props:[''] 的方式接收父組件傳遞的參數(shù)，如果子組件不使用props:['']接收參數(shù)，那這個(gè)參數(shù)就是一個(gè)Non-Props 屬性。下面我們通過例子來詳細(xì)看一下。

2.Non-Props 屬性

2.1 初識(shí)Non-Props 屬性

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        template:`
            <div>
                <test message="hello" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
        `
    });
    const vm = app.mount("#myDiv");

這個(gè)例子中，雖然主組件在使用 test 子組件時(shí)，傳了 message 參數(shù)，但子組件沒有接收，會(huì)發(fā)生什么事情，看下面截圖：

最后渲染時(shí)，把 message = "hello" 原封不動(dòng)的渲染到了 test 子組件的最外層標(biāo)簽上

2.2 不想把Non-Props 屬性渲染到最外層標(biāo)簽

我們希望我不接收的屬性，就是不接收，不要渲染到最外層標(biāo)簽

app.component("test", {
        inheritAttrs:false,  
        template:`
            <div>123</div>
        `
    });

在子組件中增加屬性inheritAttrs:false，Non-Props 屬性就不會(huì)渲染到最外層標(biāo)簽了

2.3Non-Props 屬性的使用場(chǎng)景

大家可能會(huì)問，這個(gè)屬性子組件不需要，VUE 還硬放到子組件的最外層元素，這是為什么，有什么用呢，我們來看下面的例子

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
        `
    });

從這個(gè)例子就能看出，當(dāng)父組件想為子組件添加樣式時(shí)，使用Non-Props 屬性就非常合適，也適合于其他單純傳遞屬性的場(chǎng)景。

2.4 子組件有多個(gè)最外層標(biāo)簽

剛才講了，Non-Props 屬性會(huì)往子組件最外層的標(biāo)簽渲染屬性，當(dāng)子組件有多個(gè)最外層標(biāo)簽時(shí)，VUE 會(huì)如何渲染呢，看下面的例子

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" class="myClass" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
            <div>456</div>
            <div>789</div>
        `
    });

三個(gè)最外層標(biāo)簽都沒有父組件傳遞的屬性，VUE 不知道該給哪個(gè)標(biāo)簽渲染，干脆就不渲染了

2.5 為某個(gè)最外層標(biāo)簽渲染

如果我們希望某個(gè)標(biāo)簽可以拿到父組件的屬性，可以這樣寫

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" class="myClass" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
            <div v-bind="$attrs" >456</div>
            <div>789</div>
        `
    });

使用 v-bind="$attrs"，讓 VUE 知道這個(gè)標(biāo)簽需要父組件的屬性

2.6 獲取父組件傳遞的某一個(gè)屬性

上面的例子，子組件中間的 div 標(biāo)簽被渲染了父組件傳遞的所有屬性，如果這個(gè)標(biāo)簽只需要的其中一個(gè)或幾個(gè)屬性，可以這么寫

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" class="myClass" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
            <div :style="$attrs.style" >456</div>
            <div>789</div>
        `
    });

這樣，中間的 div 只被渲染了 style 屬性，而沒有 class 屬性

2.7 生命周期函數(shù)獲取Non-Props 屬性

子組件的生命周期函數(shù)，也是可以獲取Non-Props 屬性的，我們來看下面的例子

app.component("test", {
        mounted() {
            console.info(this.$attrs.class);
        },
        template:`
            <div>123</div>
            <div :style="$attrs.style" >456</div>
            <div>789</div>
        `
    });