這里暫時僅介紹下“非prop特性（attr）”
一般的特性是顯式定義的（即 prop特性）吱抚，如下面代碼中的 post 逝钥，用于從外部（一般是父組件）向該組件傳入數(shù)據(jù)。不過寫子組件的人并不可能提前預見該組件會被如何使用愈涩，也就不知道該組件會被傳入哪些特性蚌本。為了提高組件的可用性，組件可以接受任意的特性羞芍，那些未在組件中顯式定義的非prop特性哗戈，會被添加到這個組件的根元素 $attrs上，如第二段代碼和圖片所示：注意 組件中顯式定義的props特性 post 和 組件中未提前定義的非props特性 non-prop 從父組件傳入后荷科，在組件內部存儲的位置唯咬。

 Vue.component('blog-post',{
        data:function () {
            return {
                inputText:'waiting for input...'
            }
        },
        props:{
            post:Object
        },
       ...
)；

let vm=new Vue({
        el:"#posts-demo",
        data:{
            posts:[
                {   id:1,
                    title:'title1',
                    content:'<p>content1</p>'},
                {   id:2,
                    title:'title2',
                    content:'<p>content2</p>'}
            ],
            // 用來傳給blog-post組件的非prop特性（即blog-post組件并未顯式定義該prop特性）
            nonProp:'一個非prop特性的值'
        }, })

 <blog-post v-for="post in posts"
                   :post="post"
                   :non-prop="nonProp"
        >
</blog-post>

組件blog-post內部

組件blog-post經過渲染呈現(xiàn)在頁面上畏浆，非prop特性會被作為普通的html元素的屬性胆胰，如下圖所示。

image.png

在Vue2.4.0刻获，可以在組件的定義中設置 inheritAttrs: false 蜀涨，這樣渲染組件的時候就不會將非prop特性處理為普通的html元素的屬性，而通過該組件的 $attrs還是可以獲取到非prop特性蝎毡。如下：

  Vue.component('blog-post',{
        props:{
            post:Object
        },
        inheritAttrs:false,
        ...
}

image.png

有時候會有這樣的場景厚柳，組件 blog-post 接收了其父組件傳入的非prop 特性 non-prop，此特性在組件 blog-post 并不會被直接使用沐兵，而是要在組件 blog-post 的子組件 custom-input 中使用别垮，那么可以在組件 blog-post 中借助 $attrs 來將其傳給子組件。這也算是從祖父組件A經過子組件B向孫子組件C傳遞數(shù)據(jù)的一個方法吧扎谎。

 Vue.component('blog-post',{
        data: ...,
        props:{
            post:Object
        },
        template:`
            <div class="blog-post">
                ...
                <custom-input           
                  v-model="inputText" 
                  :passData="$attrs"
                >
                </custom-input>
               ...
            </div>
        `,
        ...

image.png

不過上面的寫法 :passData="$attrs" 碳想，造成了在組件custom-input 中使用的時候還要 $attrs.passData.non-prop，不夠直接毁靶，推薦這樣寫 v-bind="$attrs"胧奔，效果如圖：

image.png