有时候可能有这个需求:用v-html渲染html内容,但是这个html里面不仅仅是原生的html内容,可能包含v-on等vue的事件、v-model等vue的数据甚至vue自定义组件标签,但是v-html是不能解析这些的,自定义组件也会像普通的html标签,直接渲染出来了。这时常用两种方法解决:一种原生使用v-if提供的compile和mount特性;第二种类则使用render函数带来的特殊能力实现这一点。而v-runtime-template插件就是基于第二种实现的,下面简单看下用法:
1、安装:
1 | npm install v-runtime-template |
2、如果是vue-cli项目,找到vue.config.js,如果没有,就创建一个,放在根目录,添加下面的代码:
3、如果是 Nuxt,就打开nuxt.config.js,添加下面的代码:
4 | extend(config, { isDev, isClient }) { |
5 | config.resolve.alias[ "vue" ] = "vue/dist/vue.common" ; |
4、使用示例:
03 | <v-runtime-template :template= "template" ></v-runtime-template> |
08 | import VRuntimeTemplate from "v-runtime-template" ; |
10 | import AppMessage from "./AppMessage" ; |
16 | <app-message>Hello {{ name }}!</app-message> |
如果是v-html,那么 “<app-message>Hello {{ name }}!</app-message>”将被直接显示到页面中,连name都不会解析,但是v-runtime-template则会解析它之后输出到页面中。
这里要注意:
1、template必须要有一级标签包含,不能像下面这样:
如果包含多标签,请写成下面:
2、虽然v-runtime-template看起来也是一个自定义组件,但是在当前页面的v-on、v-model都能直接定义,无需考虑什么父子级的传参等。