Question

我们说我有一个VueJS的基本页面如下：

＆＃13;

Vue.component('child', {
  template: '<p>{{message}}</p>',
  props: ["message"]
});

new Vue({
  el: '#theParent',
  data() {
    return {
      message: "It works!"
    }
  }
});

＆＃13;

<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>

＆＃13;

消息可行！按预期显示三次，但如果我在v-bind:message="message"组件上删除<child>则无法正常工作。由于我的所有<child>组件都需要来自父项的message值，有没有办法在VueJS组件声明中指定一次，而不是在添加{{1}时每次在HTML中指定}？

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，但是您可以使用相对简单的共享数据源，并在您发现需要时添加更复杂的解决方案。

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

1 个答案: