Question

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

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

<template> <div ref="root" class="hello">Hi</div> </template> <script> export default { mounted() { this.$refs.root.className = 'hello' } } </script>要避免“非道具属性”继承，但是：

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

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

所以建议避免“课堂”和核心组件中的“样式”继承？

更新

建议的解决方案：

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>
                `
    });

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

Sub CopyYesInW()
Dim lastRow As Long, i As Long
'determine last row in column W
lastRow = Cells(Rows.Count, "W").End(xlUp).Row
For i = 1 To lastRow
    'if Yes in W then copy from P to W in current row
    If Cells(i, "W").Value = "Yes" Then
        Cells(i, "P").Value = Cells(i, "P").Value
    End If
    If Cells(i, "W").Value = "Yes" Then
        Cells(i, "U").Value = Cells(i, "U").Value
    End If
Next
End Sub

更新 [2018年5月20日]：

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

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

Answer 1

非常hacky的解决方案，但这对我有用

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', '')
}

Answer 2

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

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

2 个答案: