一个很简单的封装组件。

[weixin_38048553]

一个很简单的封装组件，如果有属性label则在input前面输出标题，但加了前面span元素之后，后面的文本框就没有了。 //对input 文本框进行封装 Vue.component("tc-input", { props: ['value', 'label'], methods: { updateVal: function (val) { console.log("子控件组件：" + val); this.$emit("input", val); }, }, template: '<span v-if="label">{{label}}</span><input v-model="value" v-on:input="updateVal($event.target.value)" />' });

[weixin_38104149]

請問你有這個錯誤嗎? <span v-if="label">{{label}}</span><input v-model="value" v-on:input="updateVal($event.target.value)" /> - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

[Iceblood_kaka]

没看到这个错误，应当就是这个问题，最外面包含一个div就可以了。谢谢了。

[weixin_38069520]

需要用一个元素把这些包起来，只允许有一个根元素 例如： <div> <span v-if="label">{{label}}</span> <input v-model="value" v-on:input="updateVal($event.target.value)" /> </div> 或者 你只显示一个元素的话 <span v-if="label">{{label}}</span> <input v-else v-model="value" v-on:input="updateVal($event.target.value)" />

[weixin_38057949]

我知道這個答案，謝謝你