多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
>[success] # $attrs 包括 class & style ~~~ 1.于2.x 不同3.x现在 $attrs 包含传递给组件的所有 attribute,包括 class 和 style。 ~~~ >[danger] ##### 在看这个之前 [在看这个之前你需要看这篇文章关于2.x inheritAttrs介绍](https://www.kancloud.cn/cyyspring/vuejs/988817) * 子组件 ~~~html <template> <label> <input type="text" v-bind="$attrs" /> </label> </template> <script> export default { inheritAttrs: false } </script> ~~~ * 父组件 ~~~html <my-component id="my-id" class="my-class"></my-component> ~~~ >[info] ## 2.x 使用 ~~~ 1.当将'inheritAttrs' 为false 时候(默认是true),它只识别在子组件prop绑定的值通过父组件传递, 除了style 和 class 他们无论true 或者flase 只要没有具体定义 他们将都会和子组件最外层的dom的 class 和style 合并 2.如果是默认true,class 和style依旧是之前规则 没有在子组件定义的prop但在父组件使用的属性将替换掉子 组件最外层dom相同属性 3.包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明 任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内 部组件,简单理解这句话'我没在子组件定义prop 但是又想让一些属性想prop 一样作用在指定位置我可以使用$attrs' 4.默认true的情况下没有定义的将作用在最外层dom,class和style 是合并,但是现在问题就是我设置了'inheritAttrs' 为false ,那么没定义的一些属性(class 和style除外他们依旧将和最外层dom 一起合并),但是如果这个时候使用 '$attrs' 这些没有被定义的元素在父组件使用时候默认在子组件定义了,那么这些元素可以在我们声明地方使用, class 和style 却被刨除在外 ~~~ >[danger] ##### 举个例子 ~~~ 1.inheritAttrs: false 时候原本向下面案例'id="my-id"' 将不会对最后生成效果有任何体现因为他没有再prop定义 不会增加该熟悉,并且他有不是true 会在自组建最外层dom替换,现在使用了'$attrs' 将id 变成了一个子组件的 一个 prop此时就变成下面效果作用在定义的位置 而不是像true作用在最外层像flase没定义无任何效果 2.但是class 却没有想我们预期一样因为$attrs 不能将class 和style 抽象理解成转换成prop 依旧作用在最外层 dom节点上 ~~~ * 上面例子效果 ~~~html <label class="my-class"> <input type="text" id="my-id" /> </label> ~~~ >[info] ## 3.x ~~~ 1.3.x $attrs 包含所有的 attribute class 和style 不在是自己的一套规则 ~~~ * 上例子在3.x渲染效果 ~~~html <label> <input type="text" id="my-id" class="my-class" /> </label> ~~~