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

Posted 2023-02-23

【中文标题】Vue - 无法将特定值传递给更高的组件

【英文标题】：Vue - Unable pass specific value to higher component

【发布时间】：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>

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

【参考方案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>