javascript - 在没有插值的情况下在 vue 2 模板中设置部分属性(用于超赞字体图标)的解决方法？

Question

我正在尝试使用 vue.js 创建一个组件，其中该组件包含一个字体很棒的图标，该图标在模板中提供。例如，我希望能够使用 <big-nav-item icon="fa-phone" word="contact">并在我的组件中添加字体超棒的电话图标和联系人字样。

问题是 Font Awesome 图标在元素的属性中使用它们的标识符，而 Vue.js 2.0 似乎不想在元素属性中使用插值。所以下面的代码失败了:

Vue.component("big-nav-item", {
    props: ["icon", "word"],
    template: '<div class="three columns"><span class="fa-stack fa-3x"><i class="fa {{ icon }} fa-stack-2x"></i><span class="fa fa-stack-1x" style="margin-top:50%; font-size:20px; font-weight:bold;">{{ word }}</span></span></div>'
});

因为 Vue 不允许我通过模板将 fa-phone 位传递到组件中。相反，它会抛出一个错误:

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.

有人知道解决这个问题的好办法吗？我唯一能想到的尝试是为组件编写一个方法，该方法使用原始字符串连接来构建整个图标元素，然后将整个元素插入模板中，这似乎非常尴尬。如果这个问题没有标准解决方案，我想我会尝试一下...

Answer 1

本质上，在这种情况下，

Vue.component("big-nav-item", {
    props: ["icon", "word"],
    template: `
      <div class="three columns">
        <span class="fa-stack fa-3x">
          <i class="fa fa-stack-2x" :class="icon"></i>
          <span class="fa fa-stack-1x" style="margin-top:50%; font-size:20px; font-weight:bold;">{{ word }}</span>
        </span>
      </div>`
});

Example .