Vue.js：将类传递给组件中的嵌套标签答案

【问题标题】：Vue.js: passing class to nested tag in componentVue.js：将类传递给组件中的嵌套标签
【发布时间】：2021-01-02 18:12:00
【问题描述】：

如何从 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>

app.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>

【问题讨论】：

你不会简单地传递icon 属性，例如<my-button icon="fa-close"/>吗？
@Phil 似乎不起作用
错误是什么？
@Sphinx 没有错误。它只是不渲染任何东西
打开浏览器控制台，<my-button>渲染的Dom是什么？

标签： javascript laravel vue.js

【解决方案1】：

可以直接将 props 绑定到 html 属性。

在 MyButton.vue 中：

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

或者您可以将icon 作为字符串传递。

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

然后，您必须将 props 传递给组件调用者。

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

【讨论】：

谢谢@Sphinx。刚刚意识到这一点。
你发现了什么？你之前的版本没有问题:icon="icon"~jsfiddle.net/6jop398a
class 可以接受一个数组，vue 会将它编译成一个空格分隔的字符串。
但是 prop 是一个字符串?
@Phil，即使prop=icon 是一个字符串，但<i class="fa fa-lg" :class="icon"></i> 和<i class="fa fa-lg" :class="[icon]"></i> 都是正确的。我们不知道用例的上下文，可能 Op 想要将多个类传递给prop=icon。可能 Op 想要组合两个类，例如 :class="[icon, innerClasses]"（假设 innerClasses 是一个数据/计算属性。