Vue 动态 xlink:href attr

Question

我想将图标名称作为道具传递给 vue 组件，并根据该图标名称使用它来呈现图标。 我通过将图标名称传递给组件并将 xlink:href 绑定到数据属性调用 href 来做到这一点，但它不起作用！ ：/ 我怎样才能做到这一点？ 下面是组件代码：

<template>
  <svg class="icon">
      <use :xlink:href="href"></use>
  </svg>
</template>

<script>
export default {
  name: 'Icon',
  props: {
    icon: String
  },
  data: function () {
      return {
        href: `@sprite#icon-kb-${this.icon}`
      }
    }
}
</script>

这是组件使用代码：

<Icon icon="down"/>

Answer 1

看起来它工作得很好......

 const icon = Vue.component('Icon', { props: { icon: String }, data: function () { return { href: `#${this.icon}` } }, template: ` <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use :xlink:href="href"></use> </svg> ` }) const ap = new Vue({ el: "#app", components: { icon }, data() { return { icons: ['icon-8pt-star', 'icon-star'] } }, computed: { iconsInReverseOrder() { return this.icons.slice().reverse() } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <Icon v-for="(icon, index) in icons" :icon="icon" :key="icon+'1'"></Icon> </div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="icon-8pt-star" viewBox="0 0 95 95"> <path class="cls-1" d="M83.59,63.91,97.5,50,83.59,36.09V16.41H63.91L50,2.5,36.09,16.41H16.41V36.09L2.5,50,16.41,63.91V83.59H36.09L50,97.5,63.91,83.59H83.59Z" transform="translate(-2.5 -2.5)"/> </symbol> <symbol id="icon-star" viewBox="0 0 95 95"> <polygon points="47.5 0 62.18 31.27 95 36.29 71.25 60.63 76.86 95 47.5 78.77 18.14 95 23.75 60.63 0 36.29 32.82 31.27 47.5 0"/> </symbol> </svg>