inheritAttrs和$attrs的使用

最新推荐文章于 2024-08-23 21:35:01 发布

李振恒

最新推荐文章于 2024-08-23 21:35:01 发布

阅读量328

点赞数 1

分类专栏： # Vue初级文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_45240616/article/details/103837736

版权

Vue初级专栏收录该内容

17 篇文章 0 订阅

订阅专栏

禁用继承属性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: `<label >
                 <p v-bind="$attrs">测试</p>
                  <input  v-bind="$attrs">
             </label>`
})
new Vue({
  el:'#app',
  data:{
    class1:'class1note',
    test1:'test1note',
    test2:'test2note',
},
})

页面结果：
在这里插入图片描述
当将属性修改为：inheritAttrs: true,的时候
页面的结果：

包含了所有的属性：

最后总结：
当inheritAttrs的属性值为true（不写该行属性的结果同true，也就是inheritAttrs默认为true），组件的根元素会自动继承所有的属性！当为false的时候，根元素只会继承注册的属性，自建的属性不会继承！！
$a t t r s : 它包含了父组件所有的自建属性！可以通过 v - k i n d = “$ attrs”将所有自建属性赋给想要的元素上！！