javascript - 如何在 Vue 2.5 中从带有 html 标签的字符串创建 VNode？

Question

我正在尝试创建一个呈现 Feather Icons 包的功能组件，但我无法弄清楚最后一步。这是我得到的:

这是我的 FeatherIcon.vue 组件。

<script>
const feather = require("feather-icons");

export default {
  components: {},
  props: {
    type: {
      required: true,
      type: String
    }
  },
  mounted() {},
  render(createElement) {
    return createElement(
      "svg",
      {attrs: feather.icons[this.type].attrs },
      feather.icons[this.type].contents
    );
  }
};
</script>

根据 Vue 文档，第三个参数应该是:

// {String | Array}
// Children VNodes, built using `createElement()`,
// or using strings to get 'text VNodes'. Optional.

但是，我的第三个参数 feather.icon[this.type].contents 的结果是一个包含 svg 标签内的“innerHTML”的字符串:

"<line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path>"

所以我的问题是，如何将feather.icon[this.type].contents转换成一组VNode？

我尝试过使用 DOMParser 和 parseFromString 但没有成功。有什么想法吗？

Answer 1

您可以使用 the data object 的 domProps 属性.

This object also allows you to bind normal HTML attributes as well asDOM properties such as innerHTML (this would replace the v-htmldirective)

这是一个例子。

console.clear()

const content = `
  <line x1="6" y1="3" x2="6" y2="15"></line>
  <circle cx="18" cy="6" r="3"></circle>
  <circle cx="6" cy="18" r="3"></circle>
  <path d="M18 9a9 9 0 0 1-9 9"></path>
`

new Vue({
  el: "#app",
  render(h){
    return h("svg", {domProps:{innerHTML: content}})
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app"></div>

在您的情况下，您只需将 innerHTML 设置为羽毛中的内容。

此外，作为旁注，如果您没有模板，通常只使用直接的 javascript 文件。您不需要单个文件组件。所以你的组件将是

FeatherIcon.js

const feather = require("feather-icons");

export default {
  props: {
    type: {
      required: true,
      type: String
    }
  },
  render(createElement) {
    return createElement(
      "svg",
      {
        attrs: feather.icons[this.type].attrs,
        domProps: {
          innerHTML: feather.icons[this.type].content
        }
      });
  }
};

最后，您提到想要将它变成一个功能组件，在这种情况下，您可以这样做:

const FeatherIcon = {
  functional: true,
  props: {
    type: {
      required: true,
      type: String
    }
  },
  render(h, context){
    const {contents, attrs} = feather.icons[context.props.type]
    return h("svg", {attrs, domProps: {innerHTML: contents}})
  }
};

这是一个工作的例子。

console.clear()

const FeatherIcon = {
  functional: true,
  props: {
    type: {
      required: true,
      type: String
    }
  },
  render(h, context){
    const {contents, attrs} = feather.icons[context.props.type]
    return h("svg", {attrs, domProps: {innerHTML: contents}})
  }
};

new Vue({
  el: "#app",
  components: {
    FeatherIcon
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<div id="app">
  <feather-icon type="eye"></feather-icon>
  <feather-icon type="activity"></feather-icon>
  <feather-icon type="award"></feather-icon>
</div>