Vue render 渲染 得到的组件被提示 the component is a fragment instance

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

我来回答

回答1