Question

我想在Vue中使用插槽来创建动态模态组件。

我已经尝试过很多Vue /插槽的教程，但是它们都不是我想要的。

这是我的modal.vue的一部分：

<template>
  ...
    <slot name="modal-body"></slot>
  ...
</template>
<script>
</script>
<style>
</style>

这是我的javascript编译文件：

import Vue from 'vue';
import modal from './modal.vue';

new Vue({
  el: '#modal',
  render: r => r(modal)
});

这是我的HTML文件的一部分

...
<div id="modal">
  <template v-slot="modal-body">
    <input type="text" id="dynamic-input">
  </template>
</div>
...

我期望#modal（在这种情况下为#dynamic-input中存在的所有元素都插入到Vue元素中名为modal-body的插槽中。有可能做到吗？我想念什么吗？

Answer 1

检查您使用的Vue版本。 named slot syntax在2.6.0中进行了更改。请考虑以下差异。一个使用渲染函数，另一个使用模板字符串。

Vue@2.6.10

// Example using template String
const modalTemplateString = {
  template: "<div><div>above</div><slot name=\"modal-body\"></slot><div>below</div></div>"
};

const appTemplateString = new Vue({
  el: "#appTemplateString",
  components: {
    modal: modalTemplateString
  },
  template: "<div><modal><template v-slot:modal-body><div>foobar</div></template></modal></div>"
});

// Example using render function
const modalRenderFunc = {
  render(h) {
    return h("div", [
      h("div", "above"),
      h("div", this.$slots["modal-body"]),
      h("div", "below")
    ]);
  }
}

const appRenderFunc = new Vue({
  el: "#appRenderFunc",
  components: {
    modal: modalRenderFunc
  },
  render(h) {
    return h("div", [
      h("modal", [
        h("div", {
          slot: "modal-body"
        }, "foobar")
      ])
    ]);
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<h2>Template String</h2>
<div id="appTemplateString"></div>
<hr/>
<h2>Render Function</h2>
<div id="appRenderFunc"></div>

Vue@2.5.22

// Example using template String
const modalTemplateString = {
  template: "<div><div>above</div><slot name=\"modal-body\"></slot><div>below</div></div>"
};

const appTemplateString = new Vue({
  el: "#appTemplateString",
  components: {
    modal: modalTemplateString
  },
  template: "<div><modal><template slot=\"modal-body\"><div>foobar</div></template></modal></div>"
});

// Example using render function
const modalRenderFunc = {
  render(h) {
    return h("div", [
      h("div", "above"),
      h("div", this.$slots["modal-body"]),
      h("div", "below")
    ]);
  }
}

const appRenderFunc = new Vue({
  el: "#appRenderFunc",
  components: {
    modal: modalRenderFunc
  },
  render(h) {
    return h("div", [
      h("modal", [
        h("div", {
          slot: "modal-body"
        }, "foobar")
      ])
    ]);
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

<h2>Template String</h2>
<div id="appTemplateString"></div>
<hr/>
<h2>Render Function</h2>
<div id="appRenderFunc"></div>

如何通过单个文件组件在HTML中使用插槽

1 个答案:

Vue@2.6.10

Vue@2.5.22