首页 > 建站教程 > 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、安装： 
npm install v-runtime-template
2、如果是vue-cli项目，找到vue.config.js，如果没有，就创建一个，放在根目录，添加下面的代码： 
module.exports = {
  runtimeCompiler: true
};
3、如果是 Nuxt，就打开nuxt.config.js，添加下面的代码： 
// nuxt.config.js
{
  build: {
    extend(config, { isDev, isClient }) {
      config.resolve.alias["vue"] = "vue/dist/vue.common";
      // ...
4、使用示例： 
<template>
    <div>
        <v-runtime-template :template="template"></v-runtime-template>
    </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";
//假设 AppMessage 是我们自定义的组件，我们需要在v-html中用到它
import AppMessage from "./AppMessage";

export default {
  data: () => ({
    name: "Mellow",
    template: `
      <app-message>Hello {{ name }}!</app-message>
    `
  }),
  components: {
    AppMessage,
    VRuntimeTemplate
  }
};
</script>
    如果是v-html，那么 “<app-message>Hello {{ name }}!</app-message>”将被直接显示到页面中，连name都不会解析，但是v-runtime-template则会解析它之后输出到页面中。

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