Vue3如何在template插入script标签

Question

由于需要使用微信的开放标签，需要插入类似这样的代码

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>

如果在vue2，<script>是可以直接写进template的，但是在vue3会报 VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates.

错误在vuejs/vue-next/packages/compiler-dom/src/index.ts#L51 被抛出

但是不知道如何解决这个问题，或者有无迂回的方法

Answer 1

参考：

• 在Vue、React等框架中使用
• 自定义元素交互 - 3.x 语法

不知道是否有帮助

---

我也在答案中记一下：

通过 v-is 进行绕过：使用 <div v-is="'script'"></div> 以替代 <script>

Answer 2

v-is 已在 3.1.0 中被废弃。

现在可以用内置组件component来插入script标签

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。is 的值是一个字符串，它既可以是 HTML 标签名称也可以是组件名称。

<wx-open-launch-weapp username="" path="">
  <component :is="'script'" type="text/wxtag-template">
    <div style="width: 40rem; height: 5rem" />
  </component>
</wx-open-launch-weapp>

参考：
内置组件 | Vue.js
指令 | Vue.js