VueJS Binding same variable to multiple of the same component

Question

Let's say I have a basic page with VueJS as follows:

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>

The message It works! shows up three times as expected, but if I remove v-bind:message="message" on my <child> components it doesn't work. As all my <child> components will require the value of message from the parent, is there a way to specify this once in the VueJS component declaration rather than each time in the HTML when adding a <child>?

Nope. You will have to explicitly state the props that the child component will receive from the parent. There's no implicit inheritance in VueJS. — Terry
– Terry, Commented Aug 14, 2017 at 17:27
No way to do that once somewhere rather than each time? If I have dozens of <child> components it's a real hassle to keep specifying it each time... — abagshaw
– abagshaw, Commented Aug 14, 2017 at 17:28
If you have a lot of child components that are iterative in nature, you might want to look into using v-for — Terry
– Terry, Commented Aug 14, 2017 at 17:30
@Bert no it isn't. This is a simplified example of my actual problem (in my actual problem there is content within the <child> components so they are unique). — abagshaw
– abagshaw, Commented Aug 14, 2017 at 17:30

Bert · Accepted Answer · 2017-08-14 17:44:02Z

2

One way to do this is to use a shared source of data.

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>

Here, any time the message changes, it's available everywhere. This is essentially a very slim data management solution. For a more complete state management solution you may want to look into Vuex, but you can go a very long way using a relatively simple shared data source and add in more complex solutions when you find you need them.

edited Aug 14, 2017 at 17:44

answered Aug 14, 2017 at 17:34

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

abagshaw Over a year ago

That looks like a great solution - I was under the impression that objects defined outside of data() may not be reactive and changes may not be reflected in the UI immediately...but it appears I was wrong. Thanks!

Bert Over a year ago

@abagshaw No problem ;) The difference here is that when shared is added to data, it is converted into a reactive object. If both the Vue and the component just used shared without it having been added to data and nothing else was done to make shared reactive, then it wouldn't be reactive.

Collectives™ on Stack Overflow

VueJS Binding same variable to multiple of the same component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related