VueJS 道具 - 我怎样才能避免“类”属性继承？

Posted 2023-02-22

【中文标题】VueJS 道具 - 我怎样才能避免“类”属性继承？

【英文标题】：VueJS props - How can i avoid "class" attribute inheritance?

【发布时间】：2018-10-22 14:00:43

【问题描述】：

VueJS 自动继承Non-Prop Attributes，非常适合 data-* 属性。

但我们不想继承“class”和“style”属性来保存我们的核心组件，使其免受任何新开发人员的任何布局更改。（因为我们希望组件的所有样式都包含在其样式文件中）

有inheritAttrs: false可以避免“非prop属性”继承但是：

注意：此选项不影响类和样式绑定。

https://vuejs.org/v2/api/#inheritAttrs

那么建议避免核心组件中的“类”和“样式”继承？

更新：

建议的解决方案：

<template>
 <div ref="root" class="hello">Hi</div>
</template>

<script>
export default 
  mounted() 
   this.$refs.root.className = 'hello'
  
 
</script>

但是当依赖于组件的属性时，建议的解决方案甚至更复杂：

Vue.component('my-feedback', 
        props: ['type'],
        data: function()
            var vm = this;
            return 
                classes: 
                    'my-feedback-info': vm.type === 'info',
                    'my-feedback-note': vm.type === 'note',
                    'my-feedback-warning': vm.type === 'warning',
                    'my-feedback-success': vm.type === 'success'
                
            ;
        ,
        template: `
                    <div class="my-feedback" :class="classes">
                        <slot></slot>
                    </div>
                `
    );

更新 [2018 年 5 月 20 日]：

通过 VueJS 的聊天频道得到答案 - https://discordapp.com/channels/325477692906536972/325479107012067328

已解决 JSFiddle - https://jsfiddle.net/53xuhamt/28/

更新 [2021 年 4 月 28 日] ????

在 Vue3 中，我们可以通过以下方式禁用属性继承：

 inheritAttrs: false,

Vue3 文档 - https://v3.vuejs.org/guide/component-attrs.html#disabling-attribute-inheritance

示例 - https://jsfiddle.net/awan/oz5fbm2k/

【问题讨论】：

就像@Decade Moon，我认为没有正确的方法。我可以想象一种方法来做到这一点，但它不是很干净，也不容易维护。在每个或您的子组件中，您可以这样做：mounted() this.$el.className = 'only classes you want';

即使您从组件的根元素中删除 class 和 style 属性，也不会阻止样式从父级级联到组件中。只需定义所有您不想在组件中覆盖的样式规则，并确保新开发人员不要使用!important

@Awan 很高兴将链接添加到 ypur 解决方案。但请考虑用解释和代码编写您自己的答案，而不是依赖将来可能会删除的外部资源。

【参考方案1】：

您不能选择退出此行为，除非它是功能组件。

【讨论】：

"class" 在功能组件的上下文中似乎不可用 - jsfiddle.net/awan/53xuhamt

类和样式绑定在 vnode 的 data 对象中的属性 class、staticClass、style 和 staticStyle 下可用，但前提是它们已在模板中设置。在您的小提琴中，您没有指定任何类或样式，因此它们在 vnode 中不存在。

基本上，我试图在“nsc-option”的根目录上跳过class="testing"，所以“ignore-class”是写指令来处理它？

nsc-option 不是函数式组件，因此您不能阻止 Vue 将 testing 类应用于该组件的根元素（无论最终是什么）。

【参考方案2】：

相当老套的解决方案，但这对我有用

data()
   return staticClass: ''
,
mounted()
   // Capture the classes and use them on nested elements where desired
   this.staticClass = this.$el.classList.toString()

   // Remove the classes from the root element
   this.$el.setAttribute('class', '')