Vue 非Props 特性

1.非props屬性的瞭解

儘管爲組件定義明確的 props是推薦的傳參方式，組件的作者卻並不總能預見到組件被使用的場景。

所以，組件可以接收任意傳入的特性，這些特性都會被添加到組件的根元素上。

簡單的說就是父組件可以在使用子組件的時候給子組件傳遞n多的屬性, 只有子組件使用props接受的纔會成爲子組件的參數, 沒有通過props聲明的屬性就是非props, 這些屬性會自動添加爲子組件根標籤的屬性.

示例如下:

   <div id="app">
        <father-com></father-com>
    </div>

<!--    定義子組件模板-->
    <template id="son">
        <div>
            {{msg}}
        </div>
    </template>

<!--d定義父組件模板-->
    <template id="father">
        <div>
            <son-com
                    :msg = "msg"
                    :title="title"
            > </son-com>
        </div>

    </template>
    <script>
        //非props就是子組件並沒有明確props來接受父組件的傳值,那麼在網頁中子組件傳值的屬性將會成爲標籤的私有屬性
        let SonCom = ({
            props:["msg"],
            template:"#son",

        })
        let FatherCom = ({
            template:"#father",
            data(){
                return{
                    msg:"你好,世界!",
                    title:"標題"
                }
            },
            components:{
                SonCom,
            }
        })
        let vm = new Vue({
            el:"#app",
            components: {
                FatherCom,
            }
        })
    </script>

子組件的 props 中沒有接受的 title 屬性變成了子組件根標籤的屬性.

總結:
非props就是子組件並沒有明確props來接受父組件的傳值,那麼在網頁中子組件傳值的屬性將會成爲標籤的私有屬性

上面一個例子,瞭解到如果父組件給子組件傳遞非prop屬性,會自動成爲子組件模板中根標籤的標籤屬性, 適用於任何HTML屬性或特性,

可是如果父組件傳遞的非prop屬性與子組件的根標籤的屬性重名了怎麼辦呢?

會發生兩種情況, 一,替換,二合併, 先來看看替換的情況

1.1 非props屬性替換

如果父組件傳遞的prop屬性與子組件的根標籤的屬性重名,大部分情況會覆蓋子組件根標籤上的同名屬性. 即替換效果.

<div id="app">
    <father-com></father-com>
</div>

<!--    定義子組件模板-->
<template id="son">
    <!-- 子組件根標籤的type屬性值text 被父組件傳遞過了的非prop type屬性值 color替換了 -->
        <input type="text" />
</template>

<!--d定義父組件模板-->
<template id="father">
    <div>
        <!-- 父組件向子組件傳遞非prop屬性 type 值爲color -->
        <son-com
               :type="type"
        > </son-com>
    </div>

</template>
<script>
    let SonCom = ({
        template:"#son",
    })

    let FatherCom = ({
        template:"#father",
        data(){
            return{
               type: 'color',
            }
        },
        components:{
            SonCom,
        }
    })

    let vm = new Vue({
        el:"#app",
        components: {
            FatherCom,
        }
    })
</script>

通過上面的這個簡單的小例子,我們就可以發現:子組件跟標籤的 type 屬性值 text 被父組件傳遞過來的非 props 的 type 的值 color 替換了

這樣的效果非常不好,可能會破壞子組件. 所以一定要注意.

1.2 非props屬性的和並

當然了大部分會發生替換, 但是也有兩個特殊的屬性,會發生合併的效果,這兩個屬性就是 class 與style屬性
看下面的代碼:

<div id="app">
    <father-com></father-com>
</div>

<!--    定義子組件模板-->
<template id="son">
    <div>
        {{msg}}
    </div>
</template>

<!--d定義父組件模板-->
<template id="father">
    <div>
        <son-com
                :msg = "msg"
                :class ="className"
                :style="style"
        > </son-com>
    </div>

</template>
<script>
    //非props就是子組件並沒有明確props來接受父組件的傳值,那麼在網頁中子組件傳值的屬性將會成爲標籤的私有屬性
    let SonCom = ({
        props:["msg"],
        template:"#son",

    })

    let FatherCom = ({
        template:"#father",
        data(){
            return{
               className:"box",
                style:{
                   width:"300px",
                    height:"200px",
                    backgroundColor:"#58a",
                }
            }
        },
        components:{
            SonCom,
        }
    })

    let vm = new Vue({
        el:"#app",
        components: {
            FatherCom,
        }
    })
</script>

在這段代碼中非 props 屬性 style 和 class 與原屬性進行了和並, 與子組件根標籤的class 和 style 屬性發生合併.