Javascript 注入html-使用插槽还是v-html？

我的情况是：

我正在通过以下方式创建模态：

<Modal id="modal">    
    <my-component></my-component>    
</Modal>

现在我希望模态中的内容是动态的，这样我就可以放置

或

或w/e。我尝试过使用插槽（它可以工作），但它不是真正的动态。我想知道我是否错过了一些可以让插槽更有活力的东西

以下是如何设置我的模式：

<div 
    :id="id"
    class="main" 
    ref="main" 
    @click="close_modal"
>
    <div ref="content" class="content" :style="{minHeight: height, minWidth: width}">
        <div ref="title" class="title" v-if="title">
            {{ title }}
            <hr/>
        </div>
        <div ref="body" class="body">
            <slot></slot>
        </div>
    </div>
</div>

{{title}}

我认为使用插槽是一个很好的选择。通过在2.5中引入

插槽范围

，您基本上获得了一个反向属性功能，您可以在子组件中设置默认值，并在父组件中访问它们。当然，它们是完全可选的，您可以在插槽中随意放置任何您喜欢的内容

下面是一个示例组件，允许您根据需要自定义页眉、正文和页脚：

// MyModal.vue
<template>
  <my-modal>
    <slot name="header" :text="headerText"></slot>
    <slot name="body" :text="bodyText"></slot>
    <slot name="footer" :text="footerText"></slot>
  </my-modal>
</template>

<script>
  export default {
    data() {
      return {
        headerText: "This is the header",
        bodyText: "This is the body.",
        footerText: "This is the Footer."
      }
    }
  }
</script>

// SomeComponent.vue
<template>
  <div>
    <my-modal>
      <h1 slot="header" slot-scope="headerSlotScope">
        <p>{{ headerSlotScope.text }}</p>
      </h1>
      <div slot="body" slot-scope="bodySlotScope">
        <p>{{ bodySlotScope.text }}</p>
        <!-- Add a form -->
        <form>
          ...
        </form>
        <!-- or a table -->
        <table>
          ...
        </table>
        <!-- or an image -->
        <img src="..." />
      </div>
      <div slot="footer" slot-scope="footerSlotScope">
        <p>{{ footerSlotScope.text }}</p>
        <button>Cancel</button>
        <button>OK</button>
      </div>
    </my-modal>
  </div>
</template>

<script>
import MyModal from './MyModal.vue';

export default {
  components: {
    MyModal
  }
}
</script>

//MyModal.vue
导出默认值{
数据（）{
返回{
标题文字：“这是标题”，
bodyText：“这就是身体。”，
页脚文本：“这是页脚。”
}
}
}
//SomeComponent.vue
{{headerSlotScope.text}

{{bodySlotScope.text}

...
...
{{footerSlotScope.text}

取消
好啊
从“/MyModal.vue”导入MyModal；
导出默认值{
组成部分：{
MyModal
}
}

嗯，我可能需要完全更改内容。所以我现在使用的是

输入

，但是我有一个按钮可以清除内容并输出其他内容，比如

。你知道怎么把它放进插槽里吗？另一个因素是我可能想要一个全局模式，这样我就可以通过它的

id

来访问它。事实上，这允许你以任何你喜欢的方式来更改它。在

SomeComponent.vue

中，头部插槽不必使用

h1

，它可以是您喜欢的任何类型，其余插槽也是如此。您也可以省略任何默认内容，插槽将根本不会呈现。它非常灵活。可以使用Vuex吗？在我的React项目中，我将一个存储变量分配给一个组件，然后在模式中呈现。我认为它不可能以您希望的方式工作，而是使用

v-html

指令呈现，这是您从问题标题中知道的。据我所知，问题在于数据绑定不是通过

v-html

应用的，因此您无法在通过store变量呈现的输入元素上使用

v-model

。