嵌套的 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 都使用父Vue 实例的msg 数据。在这里，我只想展示一个示例，但在我的用例中，这些实例并不相邻，只是通过Django 框架以某种方式相互关联（此处不重要）。

更新

这不是一个重复的问题。问这个问题的人不需要嵌套的 Vue 实例，只需要组件。但我明确表示我知道组件但需要嵌套 Vue 实例。

问题

根据这个issue，他们不会实现这样的行为。

Answer 1

如果你真的需要嵌套实例，请使用 VueJS v-pre 指令。您可以将v-pre 添加到子应用程序。更多详情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 }} 对于子实例将是“其他”。请注意，由于v-pre 指令，vue 父实例不会编译嵌套实例（#child 元素）。