Vue: How to bind Vue model to multiple snippets in HTML?

[kxxoling]

eg. I have something like this:

<div id="div1" class="bind">
{{ content }}
<div>
...
<div id="div2" class="bind">
{{ content }}
<div>
...
<script>
var model = Vue({
  el: '#div1',
  data: {content: 'some thing'}
})
</script>

Now only div1 is bound to model. How could I bind both div1 and div2 to model? Is there something like el: '.bind'?

[simplesmiler]

They should have a common parent, and the parent should be el: ... instead of a child.

[kxxoling]

@simplesmiler But when I use other MVVM frameworks like Angular or Avalon, I can directive scope anywhere in HTML document. Can't that really be done with Vue?

[yyx990803]

@kxxoling Angular and Avalon simply scan the whole page. Vue doesn't do that so that you can have finer control on which part of the page to put under Vue's control. If you want the whole page, just do new Vue({ el: 'body' }).

[kxxoling]

@yyx990803 Should I manage all the data in one Vue model? Or Vue supports nested scope? I decide to use router lately, so I'm worrying Vue the whole document will get some side effects.

BTW, should I use Chinese to make a better explanation? I'm not good at English communication.

[simplesmiler]

@kxxoling Vue supports custom components, with each instance of component having it's own viewmodel and with the ability to pass data further down the instance hierarchy via props. You can think of component as of element-directives of angular.

[kxxoling]

@simplesmiler In my case, there's only little data should be shared, div1 only need one attribute from the model, whereas div2 is the main interactive part. If there's no easy way to share data, I'd rather using hook to manually change the data in div1.

[simplesmiler]

@kxxoling Instances may share data by reference, but I would recommend against that, as it's makes dependency between them implicit.

var commonData = { ... };

var vm1 = new Vue({
  el: '#div1',
  data: commonData,
};

var vm2 = new Vue({
  el: '#div2',
  data: commonData,
};

[yyx990803]

@kxxoling have you look that docs on component props?

[kxxoling]

@simplesmiler It works, thanks a lot!
@yyx990803 Nope, I thought it would be a higher class of functions, and doesn't get started to study yet. Should I using it here?

[yyx990803]

@kxxoling component is the core of Vue, I'd recommend read through the guide just to get an idea of it.

[kxxoling]

@yyx990803 I thought it as a feature... Thanks, I will!