Nested Vue instances
Are there nested instances Vue
anyway? I know about Vue components
, and I use them extensively in my applications, but in this case, I have different applications (I mean different projects) that are loaded inside each other on the page.
For example, when I do something like the following:
<div id="parent">
{{msg}}
<div id="child">
{{msg}}
</div>
</div>
...
new Vue({
el: '#parent',
data: { msg: 'sth' },
})
new Vue({
el: '#child',
data: { msg: 'sth else' },
})
But both msg
use the msg
data of the parent instance Vue
. Here I just want to show an example, but in my use case, these instances are not next to each other and are somehow related to each other through the framework Django
(which is not important to note here).
Update
This is not a duplicate question. The person asking this question does not need nested instances Vue
and just needs components. But I said bluntly that I know about components but need nested instances Vue
.
Question
According to this issue, they will not implement this behavior.
source to share
If you really want nested instances then use the VueJS directive v-pre
. You can add v-pre
to child app. More on this here .
<div id="parent">
{{msg}}
<div id="child" v-pre>
{{msg}}
</div>
</div>
...
new Vue({
el: '#parent',
data: { msg: 'sth' },
})
new Vue({
el: '#child',
data: { msg: 'sth else' },
})
{{ msg }}
for the child instance it will be "sth else". Please note that the nested instance (#child element) is not compiled by the parent vue instance due to the directive v-pre
.
source to share