首页 > 建站教程 > JS、jQ、TS >  v-runtime-template实现类似v-html但比它更加强大的功能正文

v-runtime-template实现类似v-html但比它更加强大的功能

    有时候可能有这个需求:用v-html渲染html内容,但是这个html里面不仅仅是原生的html内容,可能包含v-on等vue的事件、v-model等vue的数据甚至vue自定义组件标签,但是v-html是不能解析这些的,自定义组件也会像普通的html标签,直接渲染出来了。这时常用两种方法解决:一种原生使用v-if提供的compile和mount特性;第二种类则使用render函数带来的特殊能力实现这一点。而v-runtime-template插件就是基于第二种实现的,下面简单看下用法:
1、安装:
1npm install v-runtime-template
2、如果是vue-cli项目,找到vue.config.js,如果没有,就创建一个,放在根目录,添加下面的代码:
1module.exports = {
2  runtimeCompiler: true
3};
3、如果是 Nuxt,就打开nuxt.config.js,添加下面的代码:
1// nuxt.config.js
2{
3  build: {
4    extend(config, { isDev, isClient }) {
5      config.resolve.alias["vue"] = "vue/dist/vue.common";
6      // ...
4、使用示例:
01<template>
02    <div>
03        <v-runtime-template :template="template"></v-runtime-template>
04    </div>
05</template>
06 
07<script>
08import VRuntimeTemplate from "v-runtime-template";
09//假设 AppMessage 是我们自定义的组件,我们需要在v-html中用到它
10import AppMessage from "./AppMessage";
11 
12export default {
13  data: () => ({
14    name: "Mellow",
15    template: `
16      <app-message>Hello {{ name }}!</app-message>
17    `
18  }),
19  components: {
20    AppMessage,
21    VRuntimeTemplate
22  }
23};
24</script>
    如果是v-html,那么 “<app-message>Hello {{ name }}!</app-message>”将被直接显示到页面中,连name都不会解析,但是v-runtime-template则会解析它之后输出到页面中。

这里要注意:
    1、template必须要有一级标签包含,不能像下面这样:
1template: `
2  <div>1</div>
3  <div>2</div>
4`
    如果包含多标签,请写成下面:
1template: `
2  <div>
3      <div>1</div>
4      <div>2</div>
5  </div>
6`
    2、虽然v-runtime-template看起来也是一个自定义组件,但是在当前页面的v-on、v-model都能直接定义,无需考虑什么父子级的传参等。