vue.js - 将带有祖父母中定义的道具的数据传递给孙子

Question

父类：

<template>
  <BaseButton icon="activity">Slotted Text</BaseButton>
</template>

子类：BaseButton

<template>
  <div>
     {{ icon }} // returns the expected result; prop is coming in.
     <slot>Default Text</slot> 
     <BaseIcon :name="{{icon}}" /> <-- error is here, see below. 
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      required: true,
    },
  },
}

孙子：

<template>
  <div class="icon-wrapper" v-html="svg"></div>
</template>

<script>
export default {
  props: {
    name: String
  }
  // code that uses the name prop
}
</script>

错误是：

Unexpected token '{' in

    {{icon}}

有没有办法将表达式传递给道具？

标签： vue.jsvuejs2

Answer 1

您应该使用v-bind:name="icon"绑定将属性与属性绑定：

  <BaseIcon v-bind:name="icon" />

或简写：

  <BaseIcon :name="icon" />