Question

说，我将一组按钮视为一个整体组件：

new Vue({
  el: "#app",
  data: {
    userInput: "0"
  },
  components: {
    screen,
    buttons : Buttons
  }
});

Vue.component('screen', {
  template: `<div id="screen">
              <input type="text" readOnly value={{this.$parent.userInput}}>
             </div>`
});

Vue.component('Buttons', {
  template: `<div id="buttons">
              <div className="button-row">
                <Button value='C'></Button>
                <Button value='+/-'></Button>
                <Button value='%'></Button>
                <Button value='/' id="div"></Button>
              </div>

              <div className="button-row"> 
                <Button value='7'></Button>
                <Button value='8'></Button>
                <Button value='9'></Button>
                <Button value='*' id="mul"></Button>
              </div>

              <div className="button-row"> 
                <Button value='4'></Button>
                <Button value='5'></Button>
                <Button value='6'></Button>
                <Button value='-' id="sub"></Button>
              </div>

              <div className="button-row"> 
                <Button value='1'></Button>
                <Button value='2'></Button>
                <Button value='3'></Button>
                <Button value='+' id="add"></Button>
              </div>

              <div className="button-row">
              <Button value='=' id="eq" ></Button>      
              </div>
            </div>`
});

Vue.component('Button', {
  props: ['value'],
  template: `<button type="button" @:click="add({{ value }})">
        {{ value }}
      </button>`,
  methods: {
    add(input) {
      if (input == "=") {
        this.$root.userInput = eval(this.$root.userInput).toString();
      } else if (input == "C") {
        this.$root.userInput = "0";
      } else if (input == "+/-" && this.$root.userInput != "0") {
        this.$root.userInput = eval(`-(${this.$root.userInput})`).toString();
      } else if (
        (input.match("[0-9]") || this.$root.userInput.slice(-1) != input) &&
        this.$root.userInput != "0"
      ) {
        this.$root.userInput = this.$root.userInput + input;
      } else if (this.$root.userInput == "0") {
        this.$root.userInput = input;
      }
    }
  }
});

道具是“ buttonsGroup”对象：

<template>
    <div>
        <button v-for="button in buttonsGroup">{{button.icon}}</button>
    </div>
</template>

使用组件时，我会显示带有图标的按钮列表，例如：

export default {
    name: 'buttonsGroup',
    props: ['buttonsGroup']
}

然后在layot中使用：

data(){
  return {
    iconButtons: [
                    {
                        icon: '<i class="fas fa-smile"></i>',
                    },
                    {
                        icon: '<i class="fas fa-sad-tear"></i>',
                    }
    ]
  }
}

结果，我看到了按钮列表，但是我看到的不是按钮内的图标，而是文本。

我做错了什么？

Answer 1

您可以使用html指令插入html内容

<button v-for="button in buttonsGroup" v-html="button.icon" />

但是更好的方法可能是仅向组件提供图标名称

<button v-for="button in buttonsGroup">
    <i :class="'fas ' + button.icon">
</button>

和

iconButtons: [
    {icon: "fa-smile"},
    {icon: "fa-sad-tear"}
]

Answer 2

阅读原始HTML的文档部分：https://vuejs.org/v2/guide/syntax.html#Raw-HTML

默认情况下，双括号将作为文本呈现，但是您可以添加v-html标志以使其呈现。

Answer 3

还要考虑“按钮组”组件没有任何可监视的状态，因此它是functional component的完美案例。

所以您可以这样实现：

<template functional>
  <div>
    <button v-for="(button, index) of props.buttonsGroup"
          :key="index"
          v-html="button.icon" 
          v-on="listeners" <!-- In case you want to listen to button events -->
    />
  </div>
</template>

在脚本中：

export default {
  props: {
    buttonsGroup: Array
  }
}

如何在按钮内渲染绑定图标？

3 个答案: