VUE3 之 Non-Props 屬性

追風人聊Java發表於2022-01-22
Vue

1. 概述

墨菲定律告訴我們：人總是容易犯錯誤的，無論科技發展到什麼程度，無論是什麼身份的人，錯誤總是會在不經意間發生。因此我們最好在做重要的事情時，儘量去預估所有可能發生的錯誤，並思考錯誤發生後的補救方案，再準備一個或多個備選方案。這樣才能做到有備無患，防患於未來。

 

言歸正傳，之前我們聊了元件的傳參，今天我們來聊一下  Non-Props 屬性， Non-Props 這個詞，不瞭解的同學一定覺得很高深，其實很簡單，之前講的元件傳參，子元件會使用 props:[''] 的方式接收父元件傳遞的引數，如果子元件不使用 props:[''] 接收引數，那這個引數就是一個  Non-Props 屬性。下面我們通過例子來詳細看一下。

 

2. Non-Props 屬性

2.1 初識 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");

這個例子中，雖然主元件在使用 test 子元件時，傳了 message 引數，但子元件沒有接收，會發生什麼事情，看下面截圖：

 最後渲染時，把 message = "hello" 原封不動的渲染到了 test 子元件的最外層標籤上

 

2.2 不想把 Non-Props 屬性 渲染到最外層標籤

 我們希望我不接收的屬性，就是不接收，不要渲染到最外層標籤

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

在子元件中增加屬性 inheritAttrs:false，Non-Props 屬性 就不會渲染到最外層標籤了

 

2.3 Non-Props 屬性的使用場景

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

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

 

 

 從這個例子就能看出，當父元件想為子元件新增樣式時，使用 Non-Props 屬性 就非常合適，也適合於其他單純傳遞屬性的場景。

 

2.4 子元件有多個最外層標籤

剛才講了，Non-Props 屬性 會往子元件最外層的標籤渲染屬性，當子元件有多個最外層標籤時，VUE 會如何渲染呢，看下面的例子

    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>
        `
    });

 

 三個最外層標籤都沒有父元件傳遞的屬性，VUE 不知道該給哪個標籤渲染，乾脆就不渲染了

 

2.5 為某個最外層標籤渲染

如果我們希望某個標籤可以拿到父元件的屬性，可以這樣寫

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 知道這個標籤需要父元件的屬性

 

2.6 獲取父元件傳遞的某一個屬性

上面的例子，子元件中間的 div 標籤被渲染了父元件傳遞的所有屬性，如果這個標籤只需要的其中一個或幾個屬性，可以這麼寫

    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 生命週期函式獲取 Non-Props 屬性

子元件的生命週期函式，也是可以獲取 Non-Props 屬性的，我們來看下面的例子

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

3. 綜述

今天聊了一下 VUE3 的 Non-Props 屬性，希望可以對大家的工作有所幫助，下一節我們繼續講元件的相關知識，敬請期待

歡迎幫忙點贊、評論、轉發、加關注 ：）

關注追風人聊Java，每天更新Java乾貨。

 

4. 個人公眾號

追風人聊Java，歡迎大家關注

相關文章