Vue - 无法将特定值传递给更高的组件答案

【问题标题】：Vue - Unable pass specific value to higher componentVue - 无法将特定值传递给更高的组件
【发布时间】：2020-11-10 08:11:35
【问题描述】：

我得到以下信息 - 无法读取未定义的“免费”属性。

我将在多个页面上添加此按钮组件，并且我有数据对象，它允许我根据我希望在页面上显示的任何页面添加文本。例如，如果它在主页上我想使用<buttons :text="buttonText.free" />，而在关于我们的页面上我想使用<buttons :text="buttonText.spend" />

模板文件

<template>
  <main class="container">
    <buttons :text="buttonText.free" />
  </main>
</template>

<script>
import Buttons from '~/components/atoms/buttons.vue'

export default {
  components: {
    Buttons
  }
}
</script>

组件文件

<template>
  <div>
    <button class="button"">
      <span>{{ buttonText }}</span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    text: String
  },
  data () {
    return {
      buttonText: {
        free: 'free',
        spend: 'spend',
        now: 'now',
        nowFree: 'now free'
      }
    }
  }
}
</script>

你能告诉我我做错了什么吗？

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-props vue-data

【解决方案1】：

由于使用了“现在”，因此不得不提出不同的结构。但我收到以下错误 - 无法读取未定义的属性“真实”。

<template>
  <div>
    <button class="button" :class="type" :style="{ 'width': width }">
      <span>{{ buttonText[this.type] }}</span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    type: String,
    width: String,
    buttonText: {
      free: 'Play free',
      real: 'Play now for real'
    }
  }
}
</script>

<template>
  <main class="container">
    <buttons type="real" />
  </main>
</template>

<script>
import Buttons from '~/components/atoms/buttons.vue'

export default {
  components: {
    Buttons
  }
}
</script>

我做错了什么？

【讨论】：

【解决方案2】：

模板.vue

<template>
  <main class="container">
    <buttons :text="your customized text" />
  </main>
</template>

<script>
import Buttons from '~/components/atoms/buttons.vue'

export default {
  components: {
    Buttons
  }
}
</script>

buttons.vue

<template>
  <div>
    <button class="button">
      <span>{{ text }}</span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    text: String
  }
}
</script>

这里有一个简单的解决方案来解决您的问题
但是你需要学习更多关于 vue 组件的基础知识
vue component doc

【讨论】：

【解决方案3】：

您应该在父组件的data 属性中定义您的数据。在template 标签内使用的所有变量都将从组件的data、computed 或props 中获取。您正在将 undefined buttonText 数据传递给您的 buttons 组件。

<template>
  <main class="container">
    <buttons :text="buttonText.free" />
  </main>
</template>

<script>
import Buttons from '~/components/atoms/buttons.vue'

export default {
data() {
  return {
    buttonText: {
        free: 'free',
        spend: 'spend',
        now: 'now',
        nowFree: 'now free'
      }
  }
},
  components: {
    Buttons
  }
}
</script>

并且在您的buttons 组件中，只需接受父组件传递的道具。在这种情况下，您使用text 作为buttons 组件的道具。

<template>
  <div>
    <button class="button"">
      <span>{{ text }}</span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    text: String
  }
}
</script>

【讨论】：