现在网|现在博客-分享、记录生活的点滴

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

作者: Chuwen
时间: 2022-05-13
分类: WEB开发
评论

## 缘由

项目中有一个需求，需要动态渲染后端返回的 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>

Laravel 使用 Pipeline 实现 AOP（我不太清楚是否真属于 AOP 我也是一知半解，如有误请指正！）

作者: Chuwen
时间: 2022-05-05
分类: PHP
评论

### 参考链接：
1. https://learnku.com/laravel/t/7543/pipeline-pipeline-design-paradigm-in-laravel
2. https://learnku.com/articles/44435

gist : https://gist.github.com/PrintNow/cbfe2db1b809bf72328a97ad9bd4449b

---

```php
<?php
//Tinker away!

// Laravel 使用 Pipeline 实现 AOP（我不太清楚是否真属于 AOP 我也是一知半解，如有误请指正！）
// 参考链接：
// 1. https://learnku.com/laravel/t/7543/pipeline-pipeline-design-paradigm-in-laravel
// 2. https://learnku.com/articles/44435

interface Pipe
{
    public function handle($content, Closure $next);
}

class RemoveBadWords implements Pipe
{
    public function handle($content, Closure $next)
    {
        echo "替换敏感词" . PHP_EOL;
        // TODO 替换敏感词为 *
        return $next($content);
    }
}

class ReplaceWords implements Pipe
{
    public function handle($content, Closure $next)
    {
        echo "替换单词" . PHP_EOL;
        $content = str_replace('you', 'PHP', $content);
        return $next($content);
    }
}

$input = 'I Love you';

$output = app(\Illuminate\Pipeline\Pipeline::class)
    ->send($input)
    ->through([
        RemoveBadWords::class,
        ReplaceWords::class,
    ])
    ->then(function ($content) {
        return $content;
    });

echo "最终处理结果：$output";

```

## 运行结果

![](https://cdn.nowtime.cc/2022/05/05/2571709060.png)

PHPStorm 添加实时模版之 TODO

作者: Chuwen
时间: 2022-04-17
分类: 软件
评论

下载 c.gb688.cn 网站里的国家标准 pdf

作者: Chuwen
时间: 2022-03-31
分类: 神奇技巧
2 条评论

使用 mysqldump 导出 MySQL 数据库每张表前 100 行数据

作者: Chuwen
时间: 2022-03-17
分类: MySQL
评论

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

Laravel 使用 Pipeline 实现 AOP（我不太清楚是否真属于 AOP 我也是一知半解，如有误请指正！）

PHPStorm 添加实时模版之 TODO

下载 c.gb688.cn 网站里的国家标准 pdf

使用 mysqldump 导出 MySQL 数据库每张表前 100 行数据

最新文章

最近回复

分类

归档

其它

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

Laravel 使用 Pipeline 实现 AOP（我不太清楚是否真属于 AOP 我也是一知半解，如有误请指正！）

PHPStorm 添加实时模版之 TODO

下载 c.gb688.cn 网站里的国家标准 pdf

使用 mysqldump 导出 MySQL 数据库每张表前 100 行数据

最新文章

最近回复

分类

归档

其它

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