Vue 3 渲染后端返回的标签 | component 标签的使用和 compile 的使用

时间: 2022-05-13

## 缘由

项目中有一个需求，需要动态渲染后端返回的 HTML，如下所示，下述的**每一个** `svg` 是后端动态返回的
```html
<template>
	<div class="class-name">
		
		<svg></svg>
		<svg></svg>
		<svg></svg>
	</div>
</template>
```

试过这样，但是不会渲染出来：
```html
<template>
	<div class="class-name">
		<template v-html="svg1"></template>
		<template v-html="svg2"></template>
		<template v-html="svg3"></template>
	</div>
</template>
```

## 解决方案

通过浏览 Vue.js 文档，发现如下文章：
- [渲染函数 - 模板编译](https://v3.cn.vuejs.org/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6 "模板编译")
- [内置特殊元素 - component](https://staging-cn.vuejs.org/api/built-in-special-elements.html#component)
- [在 Vue.js 中使用 Vue.compile](https://stackoverflow.com/questions/68981411/vue3-how-to-use-vue-compile-in-vue3)

### `<component>` 是 Vue 内置特殊元素

> `<component>` 和 `<slot>` 具有类似组件的特性，也是模板语法的一部分。它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。

所以，使用 `<component>`、`Vue.compile` 就实现了我想要的功能

gist: https://gist.github.com/PrintNow/f9fec1890bd736593800564c45584c3b
```vue
<template>
  <h2>实现效果</h2>
  <div class="class-name">
    <component :is="getSvg" :style="svg_style"></component>
    <component :is="getSvg" :style="svg_style"></component>
    <component :is="getSvg" :style="svg_style"></component>
  </div>

<h2><code>getSvg</code> 输出结果：</h2>
  <pre v-text="getSvg"></pre>

export default {
  name: "App",
  components: {},
  data() {
    return {
      svg_style: { width: "64px", height: "auto" },
      svg: `<svg t="1652418272564" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2045" width="512"
     height="512">
    <path d="M408 617m-348 0a348 348 0 1 0 696 0 348 348 0 1 0-696 0Z" fill="#C9F4EB" p-id="2046"></path>
    <path d="M927 369H111.75a25 25 0 0 1 0-50H927a25 25 0 0 1 0 50zM569.79 748H225a30 30 0 0 1 0-60h344.79a30 30 0 0 1 0 60zM668 748h-2.84a30 30 0 1 1 0-60H668a30 30 0 0 1 0 60z"
          fill="#087E6A" p-id="2047"></path>
    <path d="M832 860H197A125.14 125.14 0 0 1 72 735V263a125.14 125.14 0 0 1 125-125h635a125.14 125.14 0 0 1 125 125v472a125.14 125.14 0 0 1-125 125zM197 188a75.09 75.09 0 0 0-75 75v472a75.09 75.09 0 0 0 75 75h635a75.09 75.09 0 0 0 75-75V263a75.09 75.09 0 0 0-75-75z"
          fill="#087E6A" p-id="2048"></path>
</svg>`,
    };
  },
  computed: {
    getSvg() {
      return compile(this.svg);
    },
  },
};
</script>

Vue 3 渲染后端返回的标签 | component 标签的使用和 compile 的使用

添加新评论

最新文章

最近回复

分类

归档

其它

Vue 3 渲染后端返回的标签 | component 标签的使用 和 compile 的使用

添加新评论

最新文章

最近回复

分类

归档

其它

Vue 3 渲染后端返回的标签 | component 标签的使用和 compile 的使用