Vue多模式和组件

Question

我有一个问题，在下面的代码中，我将生成带有数据操作的按钮，并且每个按钮在单击时都会根据里面的modalTemplate属性显示不同的模态，然后通过插槽替换模板内容。

<div class="button" v-for="item in actions">
  <modal v-if="item.show" @close="item.show = false" @click="item.show = true">{{item.modalTemplate}}</modal>
  /div>

new Vue({
  el: '#app',
  data: function() {
    return {
      actions: [{
        name: 'add-new-1',
        show: false,
        modalTemplate: `<div slot="title"@click="$emit('close')>add new 1</div>`
      }, {
        name: 'add-new-2',
        show: false,
        modalTemplate: `<div slot="body" @click="$emit('close')>this is a body</div>`
      }]
    }
  }
});

Answer 1

{{item.modalTemplate}}不会将字符串编译为vue组件。

将<div slot="title"@click="$emit('close')>add new 1</div>放在<template>内的<modal>中，然后使用v-if更改显示内容，例如：

在