VueJS将相同的变量绑定到多个相同的组件

Question

假设我有一个带有 VueJS 的基本页面，如下所示：

Vue.component('child', {
  template: '<p>{{message}}</p>',
  props: ["message"]
});

new Vue({
  el: '#theParent',
  data() {
    return {
      message: "It works!"
    }
  }
});

<script src="https://cdn.jsdelivr.net/vue/2.3.2/vue.min.js"></script>
<div id="theParent">
    <child v-bind:message="message"></child>
    <child v-bind:message="message"></child>
    <child v-bind:message="message"></child>
</div>

It works! 消息按预期显示了 3 次，但如果我在我的 <child> 组件上删除 v-bind:message="message"，它就不起作用。由于我所有的<child> 组件都需要来自父级的message 的值，有没有办法在VueJS 组件声明中指定一次，而不是每次在HTML 中添加<child> 时指定？

Answer 1

一种方法是使用共享数据源。

console.clear()

const shared = {
  message: "It works!"
}

Vue.component('child', {
  template: '<p>{{shared.message}}</p>',
  data(){
    return {
      shared
    }
  }
});

new Vue({
  el: '#theParent',
  data:{
    shared
  }
});

<script src="https://cdn.jsdelivr.net/vue/2.3.2/vue.min.js"></script>
<div id="theParent">
    <child></child>
    <child></child>
    <child></child>
    <button @click="shared.message = 'new message'">Change message</button>
</div>

在这里，只要message 发生变化，它就随处可用。这本质上是一个非常纤薄的数据管理解决方案。对于更完整的状态管理解决方案，您可能需要查看 Vuex，但您可以使用相对简单的共享数据源并在您发现需要时添加更复杂的解决方案。