如何在Vue组件的slot中插入Twig模板内容

可以实现，Twig是服务端模板，会在服务端预先渲染为纯HTML字符串后才返回至前端，你只需要将渲染后的HTML内容传入Vue组件的插槽即可，常用两种实现方案如下：

如果你的Vue组件所在的页面本身就是由Twig渲染输出的，直接将Twig模板嵌入到plan组件的标签内部即可：

<plan
    v-if="isPlanVisible"
    @closePlan="closePlan"
>
    {% include 'plan.html.twig' %}
</plan>

注意：该方案仅适用于Vue模板和Twig模板在同一服务端项目中混合部署的场景，如果是前后端完全分离的项目，请使用第二种方案。

1. 先修改example.vue的代码，在插槽中新增动态HTML渲染容器，使用v-html指令渲染返回的内容：

<plan
    v-if="isPlanVisible"
    @closePlan="closePlan"
>
    <div v-html="planTwigHtml"></div>
</plan>

2. 在Vue的逻辑部分新增响应式变量和请求逻辑，打开弹窗时调用服务端接口获取Twig渲染结果：

export default {
  data() {
    return {
      isPlanVisible: false,
      planTwigHtml: ''
    }
  },
  methods: {
    async showPlan() {
      // 请求服务端接口，接口返回plan.html.twig渲染后的纯HTML内容
      const response = await fetch('/api/render-plan-twig')
      this.planTwigHtml = await response.text()
      this.isPlanVisible = true
    },
    closePlan() {
      this.isPlanVisible = false
      this.planTwigHtml = ''
    }
  }
}

3. 服务端新增对应接口，逻辑仅为渲染plan.html.twig，将渲染后的HTML字符串直接返回即可。

安全提示：如果Twig渲染的HTML中包含用户提交的不可信内容，使用v-html会存在XSS注入风险，请提前对内容做安全过滤。

内容的提问来源于stack exchange，提问作者Valera