嵌套的Vue实例

Question

反正有嵌套Vue实例吗？我知道Vue components并且我在我的应用程序中广泛使用它们但在这个用例中我有不同的应用程序(我的意思是不同的项目)在页面中相互加载.

例如,当我执行以下操作时:

<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' },
})

但两者都msg使用msg父Vue实例的数据.在这里,我只是想展示一个例子,但在我的用例中,这些实例并不是彼此相邻,只是通过Django框架以某种方式相互关联(这里不重要).

更新

这不是一个重复的问题.问这个问题的人不需要嵌套Vue实例,只需要组件.但我明确地说我知道组件但需要嵌套Vue实例.

问题

根据这个问题,他们不会实施这种行为.

Answer 1

如果确实需要嵌套实例，请使用VueJS v-pre指令。您可以添加v-pre到子应用程序。有关此的更多详细信息。

<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 }}对于儿童实例将是“其他”。注意，由于该v-pre指令，嵌套实例（#child元素）不是由vue父实例编译的。