Vue 绑定覆盖元素属性

Question

我有一个呈现 HTML 输入的组件：

<input
    :placeholder="placeholder"
    v-model="value"
    type="text"
    :disabled="disabled"
    :readOnly="readOnly"
    @focus="onFocus"
/>

请注意 type 不是 binded/reactive。

当我将这个组件放入另一个组件中，并将一个对象绑定到它时，type 被覆盖。

 <my-input v-bind="{type: 'foobar'}"></my-input>

这是by design还是bug？

示例（检查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

VueJS 将组件属性添加到组件模板的第一个 child 节点。

看这个fiddle

http://jsfiddle.net/8hzhvrng/

my-input 有一个 inputroot child 然后它得到 type="password"

my-input2 有一个 div 根 child 得到 type="number"

Answer 2

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

https://github.com/vuejs/vue/issues/5846#issuecomment-307098682

但是，您可以通过将它们添加为 props 来忽略它们并忽略它们

const Input = {
    props: ['type'],
    template: '<input type="text"/>'
    //                      ^^^^ "text" won't get overriden
}
new Vue({
    el: '#demo',
    components: {
        'my-input': Input
    }
});

class 等其他属性已合并，但 type 只能被覆盖

Vue 绑定覆盖元素属性

Vue binding overrides element attribute

javascript

vue.js

vue-component

vuejs2