VueJS 组件，不能覆盖类答案

【问题标题】：VueJS Component, can't override classVueJS 组件，不能覆盖类
【发布时间】：2018-09-11 11:48:02
【问题描述】：

我正在尝试覆盖我的 VueJS 组件的某个实例，但是由于某种原因，该组件仍在使用默认值。

我试图覆盖的值是buttonClass。其他道具似乎工作正常，所以不太确定为什么这个不工作。

实例：

<delete-button buttonClass="is-info" csrf="{{ csrf_token() }}" action="redirects/delete-all"
               text="Delete All" body="This will delete ALL redirects"></delete-button>

组件：

<template>
    <form v-bind:action="action" method="post" @submit.prevent="confirm($event)">
        <input type="hidden" name="_token" v-model="csrf">
        <input type="hidden" v-model="id" name="id-value">
        <button type="submit" :class="['button is-link', buttonClass]">
            <i class="fas fa-trash-alt"></i>
            <span v-html="text"></span>
        </button>
    </form>
</template>
<script>
    export default {
        props: {
            'id': {},
            'csrf': {},
            'action': {},
            'buttonClass': {
                default: 'is-danger'
            },
            'text': {
                default: 'Delete'
            },
            'title': {
                default: 'Are you sure?'
            },
            'body': {
                default: ''
            }
        }
        // etc
    }
</script>

【问题讨论】：

标签： vue.js

【解决方案1】：

根据这一切的组合方式，模板中的 props 有时需要采用 kebab-cases，即

<delete-button button-class="is-info" ...

见https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

HTML 属性名称不区分大小写，因此浏览器会将任何大写字符解释为小写。这意味着当您使用 in-DOM 模板时，camelCased 道具名称需要使用其 kebab 大小写（连字符分隔）等价物

仅供参考，单文件组件确实使用“in-DOM 模板”。

【讨论】：