inheritAttrs和$attrs的使用

2019-12-26    seo達(dá)人

禁用繼承屬性inheritAttrs和$attrs的使用

Index.html:



<div id="app">

        <test-input

         v-bind:class="class1"

         v-bind:style="{fontSize:17+'px'}"

         v-bind:test1='test1'

         test2="test2"

         placeholder="placeholder test3"

        ></test-input>

    </div>



Index.js:



Vue.component('test-input', {

  inheritAttrs: false,

  template: &lt;label &gt;<br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p v-bind="$attrs"&gt;測試&lt;/p&gt;<br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input&nbsp; v-bind="$attrs"&gt;<br /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/label&gt;

})

new Vue({

  el:'#app',

  data:{

    class1:'class1note',

    test1:'test1note',

    test2:'test2note',

},

})



頁面結(jié)果：



當(dāng)將屬性修改為：inheritAttrs: true,的時候

頁面的結(jié)果：



包含了所有的屬性：



最后總結(jié)：

當(dāng)inheritAttrs的屬性值為true（不寫該行屬性的結(jié)果同true，也就是inheritAttrs默認(rèn)為true），組件的根元素會自動繼承所有的屬性！當(dāng)為false的時候，根元素只會繼承注冊的屬性，自建的屬性不會繼承??！

attrs:它包含了父組件所有的自建屬性！可以通過v?kind=“ attrs:它包含了父組件所有的自建屬性！可以通過v-kind=“attrs:它包含了父組件所有的自建屬性！可以通過v?kind=“attrs”將所有自建屬性賦給想要的元素上！！




分享本文至：

日歷

鏈接

個人資料

存檔