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实例。

问题

根据这个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 }}将是＆＃34; sth else＆＃34;。请注意，由于v-pre指令，嵌套实例（#child元素）不由vue父实例编译。

嵌套的Vue实例

1 个答案: