将未转义的 HTML 传递到 vue 插槽字符串答案

【问题标题】：pass un-escaped HTML into vue slot string将未转义的 HTML 传递到 vue 插槽字符串
【发布时间】：2019-05-28 18:35:27
【问题描述】：

我正在尝试用组件替换现有元素，但使用新组件中的现有元素数据。

如何将现有元素传递到新组件槽中，保持原始元素未转义的 HTML 标记？

document.addEventListener("DOMContentLoaded", function() {
  let ExampleComponent = {
    data: function() {
      return {};
    },
    props: ["type"],
    template: `
            <div>
              <span :class="type">Decoration</span>
              <slot name="myslot">default content</slot>
            </div>
            `
  };

  new Vue({
    el: "#app",
    components: {
      example: ExampleComponent
    },
    data() {
      return {};
    },
    methods: {
      addExampleComponent: function() {
        let target = this.$el.querySelector(".example-target");

        let ComponentClass = Vue.extend(ExampleComponent);
        let instance = new ComponentClass({
          propsData: { type: "primary" }
        });
        instance.$slots.myslot = target.outerHTML;
        instance.$mount();

        target.replaceWith(instance.$el);
      }
    }
  });
});

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

  <div id="app">
    <div class="example-target">replace me!</div>
    <div>
      <button v-on:click="addExampleComponent">Replace</button>
    </div>
  </div>

目前，"example-target" 元素中的replace me! 在按下“替换”按钮后会按字面意思显示Decoration <div class="example-target">replace me!</div>。我希望保持 HTML 完整，而不被转义。

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

尝试使用v:html 指令。

    document.addEventListener('DOMContentLoaded', function () {
        let ExampleComponent = {
            data: function () { return {} },
            props: ['type'],
            template: `
          <div>
            <span :class="type">Decoration</span>
            <slot name="myslot">default content</slot>
          </div>
        `
        }

        new Vue({
            el: '#app',
            components: {
                'example': ExampleComponent
            },
            data() { return {} },
            computed: {
                addExampleComponent: function () {
                    let target = this.$el.querySelector('.example-target')

                    let ComponentClass = Vue.extend(ExampleComponent)
                    let instance = new ComponentClass({
                        propsData: { type: 'primary' }
                    })
                    instance.$slots.myslot = target.outerHTML
                    instance.$mount()

                    return instance.$options.template
                }
            }
        })
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<body>
    <div id="app">
        <div class="example-target">replace me!</div>
        <div>
            <div v-html="addExampleComponent"></div>
        </div>
    </div>
</body>

【讨论】：

我正在寻找一种方法，将<div class="example-target">replace me!</div> 元素替换为一个组件，该组件使用元素本身作为名为槽的组件之一。我也可以使用 html 指令来执行此操作吗？我包含了一个代码 sn-p 以帮助进一步解释。