vue.js - 在 vuejs 中重用具有多个相同类型组件的文本

Question

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

Answer 1

而不是 using 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>