Vue.js 插槽 - 如何在计算属性中检索插槽内容

Question

我对vue.js 插槽有疑问。 一方面，我需要显示插槽代码。 另一方面，我需要在 textarea 中使用它来将其发送到外部源。

主.vue

<template>
  <div class="main">

    <my-code>
      <template v-slot:css-code>
        #custom-css {
          width: 300px
          height: 200px;
        }
      </template>
      <template v-slot:html-code>
        <ul id="custom-css">
          <li> aaa </li>
          <li> bbb </li>
          <li> ccc </li>
        </ul>
      </template>
    </my-code>

  </div>
</template>

我的代码.vue

<template>
    <div class="my-code">

        <!-- display the code -->
        <component :is="'style'" :name="codeId"><slot name="css-code"></slot></component>
        <slot name="html-code"></slot>

        <!-- send the code -->
        <form method="post" action="https://my-external-service.com/">
            <textarea name="html">{{theHTML}}</textarea>
            <textarea name="css">{{theCSS}}</textarea>
            <input type="submit">
        </form>

    </div>
</template>

<script>
export default {
    name: 'myCode',
    props: {
        codeId: String,
    },
    computed: {
        theHTML() {
            return this.$slots['html-code']; /* The problem is here, it returns vNodes. */
        },
        theCSS() {
            return this.$slots['css-code'][0].text;
        },
    }
}
</script>

问题是 vue 不会转槽内容。 它是<VNode>元素的数组。 有没有办法在textarea中使用插槽。 或者一种在theHTML()计算属性中检索插槽内容的方法。

注意：我在 vuePress 中使用这个组件。

Answer 1

您需要创建自定义组件或自定义函数来将 VNode 直接渲染为 html。 我认为这将是最简单的解决方案。

vnode 到 html.vue

<script>
export default {
  props: ["vnode"],
  render(createElement) {
    return createElement("template", [this.vnode]);
  },
  mounted() {
    this.$emit(
      "html",
      [...this.$el.childNodes].map((n) => n.outerHTML).join("\n")
    );
  },
};
</script>

然后你可以将它用于你的组件

template>
  <div class="my-code">
    <!-- display the code -->
    <component :is="'style'" :name="codeId"
      ><slot name="css-code"></slot
    ></component>
    <slot name="html-code"></slot>

    <!-- send the code -->

    <Vnode :vnode="theHTML" @html="html = $event" />

    <form method="post" action="https://my-external-service.com/">
      <textarea name="html" v-model="html"></textarea>
      <textarea name="css" v-model="theCSS"></textarea>
      <input type="submit" />
    </form>
  </div>
</template>

<script>
import Vnode from "./vnode-to-html";
export default {
  name: "myCode",
  components: {
    Vnode,
  },
  props: {
    codeId: String,
  },
  data() {
    return {
      html: "", // add this property to get the plain HTML
    };
  },
  computed: {
    theHTML() {
      return this.$slots[
        "html-code"
      ]
    },
    theCSS() {
      return this.$slots["css-code"][0].text;
    },
  },
};
</script>

这个线程可能有助于如何将 html 模板作为道具传递给 Vue 组件