在 vuejs 中重用具有多个相同类型组件的文本答案

【问题标题】：reusing text with multiple components of same type in vuejs在 vuejs 中重用具有多个相同类型组件的文本
【发布时间】：2019-12-24 02:53:14
【问题描述】：

Vue.component('home',{
  template: '<p>{{homeText}}</p>',
  data: function(){
    return{
      homeText:"Welcome"  
    }
  }
})

new Vue ({
  el:'#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<home></home>
<home></home>
<home></home>

</div>

目前我正在对数据函数中的值进行硬编码。

我正在尝试将结果重现为

Welcome to this page!!

我希望能够向我的主组件添加不同的文本。在示例和教程中，我发现的只是如何更改数值。我想知道如何将自定义文本传递给这些组件。

我的目标是构建一个部分组件，然后将自定义文本传递给每个组件。

【问题讨论】：

标签： vue.js

【解决方案1】：

不要使用data，而是定义一个名为homeText 的道具，然后将自定义文本传递给使用它的组件：

Vue.component('home',{
  template: '<p>{{homeText}}</p>',
  props: ['homeText']
})

new Vue ({
  el:'#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<home home-text="welcome"></home>
<home home-text="to"></home>
<home home-text="this page"></home>

</div>

【讨论】：

homeText 和 home-text 之间有什么联系？ vue 是如何知道查找 home-text 的？我们从不在任何地方定义 home-text。
CamelCase 道具在模板中被转换为 kebab-case。见vuejs.org/v2/guide/components-props.html

【解决方案2】：

您可以使用v-bind 将任何变量传递给组件。

<MyComponent v-bind:myText="homeText"/>

那么这会在组件中作为一个prop出现，所以一定要映射出来。

props: {
     myText: String
}

然后你就可以像访问数据一样访问它了。

你也可能看到v-bind:myVariable="whatever"写有:myVariable="whatever"，是一样的。

【讨论】：

你可能已经互换了myText和homeText
@RalphChristopherGalido 很好，你说得对。固定。