我正在尝试覆盖我的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>
答案 0 :(得分:2)
根据所有内容的组合方式,有时需要对模板中的道具进行烤肉串包装,即
<delete-button button-class="is-info" ...
请参见https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case
HTML属性名称不区分大小写,因此浏览器会将所有大写字符解释为小写。这意味着当您使用in-DOM模板时,骆驼式道具名称需要使用kebab大小写(连字符分隔)等价物
仅供参考,单文件组件确实使用“ in-DOM模板” 。