Vue 组件 - 将道具传递给类不起作用？答案

【问题标题】：Vue Component - Passing a prop into a class is not working?Vue 组件 - 将道具传递给类不起作用？
【发布时间】：2021-07-30 19:15:51
【问题描述】：

我有一个磁贴组件，我想通过道具将磁贴标题、链接名称和图标名称提供到组件中。这将使我可以重复使用为多个页面和链接提供必要的数据。

我可以让磁贴标题和链接名称正常工作，但我无法让图标显示在磁贴上。据我在 Devtools 上看到的，字符串看起来是正确的。

注意 - 非常欢迎您对我的代码布局或使用提供任何反馈！

Home.vue

<template>
  <section class="section">
    <div class="tile is-ancestor mt-1">
      <HomeTile
       :TileTitle='"User Details"'
       :IconName='"fas fa-user-astronaut fa-3x"'
       :LinkName='"User"'>
      </HomeTile>

HomeTile.vue（组件）

<template>
  <div class="tile is-parent">
    <router-link
      :to="{name: LinkName}"
      class="tile is-child box has-text-centered is-clickable">
      <span class="icon m-2">
        <i class="IconName"></i>
      </span>
      <p class="title m-2">{{ TileTitle }}</p>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeTile',

  props: {
    TileTitle: {
      type: String,
      required: true
    },
    LinkName: {
      type: String,
      required: true
    },
    IconName: {
      type: String,
      required: true,
      default: ''
    }
  }
</script>

【问题讨论】：

当您想将变量或使用 js 语法传递到 html 属性时，请使用 : 前缀。所以你的解决方案应该是:class="IconName"
Props 应该用 camelCase 而不是 PascalCase 命名

标签： javascript vue.js vue-component vuejs3 vue-props

【解决方案1】：

我觉得这部分课前少了两个点

      <span class="icon m-2">
        <i :class="IconName"></i>
      </span>

【讨论】：

啊！很棒的现场团队！感谢反馈，我试试看
任何时候都祝你好运：D
刚刚更新，效果很好。绝对是我尖叫的那些时刻之一，我错过了它！再次感谢

【解决方案2】：

尝试使用v-bind 绑定它：

<i v-bind:class="IconName"></i>

【讨论】：