javascript - Vue 绑定(bind)覆盖元素属性

Question

我有一个呈现 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>

Answer 1

我在一个问题中回答了这个问题，这是预期的

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只能被覆盖