请问vue 子组件模板 怎么用父组件传递的html字符串?

waynebruce
  • 282

请问vue 子组件模板 怎么用父组件传递的html字符串?
父组件要传递一段html到子组件。
下面的写法报错 Component template requires a root element, rather than just text。

<div id="app">
    <comp :temp="this.temp"></comp>
    </div>
    var vm=new Vue({
            el:"#app",
            data:{
                temp:"<div>1234</div>"
               },
            components:{
            "comp":{
            template:'this.temp',
            props:['temp']
            }}
    })
回复
阅读 4k
5 个回答
✓ 已被采纳

应该不可以吧,组件模板要先编译成 render 函数再使用的

你可以考虑写成 render 函数,在 render 函数里接受父组件传来的参数,实现可变组件,但直接接受父组件的 html 串作为模板应该是不可行的

template: <div v-html='temp'></div>
template:'this.temp',

这里应该去掉单引号

谢邀
首先,如果你是单纯的传递一段静态的html代码。@zWìng 的做法已经可以了。
但如你要传递动态的template:'<div>123{{name}}</div>',我建议别这样用。
如果你有需要动态替换内容区域的需求,你可以参考官方的动态组件

最后使用 函数化组件(支持webpack)实现了需求.

<div id="app">
    <child :para="this.argus" :temp="this.html"></child>
</div>
<script>
   var vm = new Vue({
    el: "#app",
    data: {
        html: `<video></video>`,
        argus: {src:"movie.ogg",
        controls:"controls"}
    },
    components: {
        child: {
            functional: true,
            render:(h, context)=> {
                const temp = context.props.temp;
                const para = context.props.para;
                return h({template: temp}, {
                    attrs: para
                })
            },
            props: {
                temp: {
                    type: String,
                    required: true
                },
                para: {
                    type: Object,
                    required: true
                }
            }
        }
    }
})
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏