Vue2.0 组件实现动态模板(即Template)

从 这篇 文章得到启发

先定义一个组件从外部接收Template,然后在组件里调用


这里尤其要注意 Vue 引入的是 vue.esm.js 这个文件,所以这一句很重要

import Vue from 'vue/dist/vue.esm.js'

不然会报如下错误,大体就是只能用在运行时编译(除非引用的是 vue.esm.js 文件),或根据 这里 的方式修改,都可以实现运行时 template 编译

you are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

下面在父组件中传入template






注意这一段

只可以使用 v-text 不能使用 {{}},不然也会编译报错。实际效果如下

Vue2.0 组件实现动态模板(即Template)_第1张图片

这个"你"字就是我在子组件定义的 name 的值 

你可能感兴趣的:(Vue,vue.js,前端,javascript)