Vueの結合オーバーライド要素は、私はHTMLの入力をレンダリングするコンポーネントを持っている

Question

属性。

このコンポーネントを別のコンポーネントの内部に配置し、オブジェクトをバインドすると、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は、コンポーネントがコンポーネントテンプレートの最初の子ノードに属性を追加します。

ルックこのフィドル

http://jsfiddle.net/8hzhvrng/

my-inputはinputルートの子を持っており、それは私の-INPUT2はtype="number"

Answer 2

を取得divルートの子を持つtype="password"

取得します私はこの問題に答えました、これは期待されています

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

あなた小道具として、それらを追加することで可能ですが、無視attrsにとclassなどの

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

他の属性がマージされますが、typeだけ