首页

inheritAttrs和$attrs的使用

seo达人

禁用继承属性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',

},

})



页面结果:



当将属性修改为:inheritAttrs: true,的时候

页面的结果:



包含了所有的属性:



最后总结:

当inheritAttrs的属性值为true(不写该行属性的结果同true,也就是inheritAttrs默认为true),组件的根元素会自动继承所有的属性!当为false的时候,根元素只会继承注册的属性,自建的属性不会继承!!

attrs:它包含了父组件所有的自建属性!可以通过v−kind=“ attrs:它包含了父组件所有的自建属性!可以通过v-kind=“attrs:它包含了父组件所有的自建属性!可以通过v−kind=“attrs”将所有自建属性赋给想要的元素上!!




日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档