我有一个呈现 HTML 输入的组件:
<input
:placeholder="placeholder"
v-model="value"
type="text"
:disabled="disabled"
:readOnly="readOnly"
@focus="onFocus"
/>
请注意,类型
不是绑定(bind)/响应式(Reactive)的。
当我将此组件放入另一个组件中并将对象绑定(bind)到它时,type
会被覆盖。
<my-input v-bind="{type: 'foobar'}"></my-input>
<小时/>
这是设计使然
还是错误
?
示例(检查 HTML 中的input[type]
):
const Input = {
template: '<input type="text"/>'
// ^^^^ "text" gets overriden to "foobar"
}
new Vue({
el: '#demo',
components: {
'my-input': Input
}
});
<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<my-input v-bind="{type: 'foobar'}"></my-input>
</div>
最佳答案
我在一个问题中回答了这个问题,这是预期的
https://github.com/vuejs/vue/issues/5846#issuecomment-307098682
但是,您可以通过将 attr 添加为 props 来忽略它们并忽略它们
const Input = {
props: ['type'],
template: '<input type="text"/>'
// ^^^^ "text" won't get overriden
}
new Vue({
el: '#demo',
components: {
'my-input': Input
}
});
其他属性(如class
)被合并,但type
只能被覆盖
关于javascript - Vue 绑定(bind)覆盖元素属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44431754/