html:
<div id="app" v-cloak style="width:500px;margin: 0 auto">
<div class="message"\> <v-input v-model="username"\></v-input\> <v-textarea v-model="message" ref="message"\></v-textarea\> <button @click="handleSend"\>发布</button\> </div\> <list :list="list" @reply="handleReply"\></list\>
</div>
自定义组件``
Vue.component("vInput", {
props: { value: { type: [String, Number], default: "" } }, render: function (h) { var _this = this; return h("div", [h('span', "昵称:"), h("input", { attrs: { type: "text" }, domProps: { //这个地方存在疑问value可以作为attrs吗 value: this.value }, on: { input: function (event) { _this.value = event.target.value; _this.$emit('input', event.target.value) } } }) ]) }
})
问题:
运行后 chrome提示:
Attribute "v-model" is ignored on component <v-input> because the component is a fragment instance
而且自定义组件没有 显示出来
也就说自定义组件的v-model属性被忽略了,原因是这个组件被作为fragment instance。
我看了相关搜索后 ,有地方说因为render 返回的 模版包涵了多个顶级元素 也就是 模版元素没有唯一一个父元素。但是从代码来看render返回的模板不是有唯一的父元素吗?
所以(1)为什么自定义组件没有正确被显示,浏览器中看不到自定义组件的内容
(2)chrome debug控制台提示 v-model属性被忽略以及组件被作为fragment instance ,这个怎么理解?
待解决
悬赏分:80
- 离问题结束还有
点赞 0反对 0举报 0
收藏 0
分享 0
