Vue之prop

这里暂时仅介绍下“非prop特性（attr）”
一般的特性是显式定义的（即 prop特性），如下面代码中的 post ，用于从外部（一般是父组件）向该组件传入数据。不过写子组件的人并不可能提前预见该组件会被如何使用，也就不知道该组件会被传入哪些特性。为了提高组件的可用性，组件可以接受任意的特性，那些未在组件中显式定义的非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经过渲染呈现在页面上，非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传递数据的一个方法吧。

 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