Vue.js：將類傳遞給組件中的嵌套標簽

Question

如何從 HTML 文件將類插入到組件類標記中。 例如，如果我有一個如下所示的組件，並且我希望將icon字段替換為我在 html 文件中使用的任何內容。

MyButton.vue 文件：

<template>
  <component :is="type" :href="href" class="button btn">
      <i class="fa fa-lg" :class="[icon]"></i>
  </component>
</template>


<script>
  export default {
    props: {
      href: {
        type: String,
        default: null
      },
      to: {
        type: String,
        default: null
      },
      icon: {
        type: String,
        default: null
      }
    },
    computed: {
      type() {
        if (this.href) {
          return 'a'
        } else {
          return 'button'
        }
      }
    }
  }
</script>

應用程序.js

Vue.component('my-button', require('./components/MyButton.vue').default);

html文件：

<my-button class="fa-save"></my-button>

我所需的輸出將相當於：

<a type="button" class='button btn'><i class="fa fa-lg fa-close "></i></a>

Answer 1

您可以直接將 props 綁定到 html 屬性。

在 MyButton.vue 中：

<i class="fa fa-lg" :class="[icon]"></i>

或者您可以將icon作為字符串傳遞。

<i class="fa fa-lg" :class="icon"></i>

然后，您必須將道具傳遞給您的組件調用者。

<my-button icon="fa-close"></my-button>