嵌套的Vue实例

Question

嵌套的Vue实例

14

有没有办法嵌套 Vue 实例？我知道 Vue组件，并且我在我的应用程序中广泛使用它们，但在这种情况下，我有不同的应用程序（我的意思是不同的项目），它们在页面内互相加载。

例如，当我执行以下操作时：

<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实例的数据。在这里我只是想展示一个示例，但在我的用例中，这些实例不会相邻，只是通过Django框架某种方式相关联（这里不重要）。

更新

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

问题

根据这个问题，他们不打算实现这样的行为。

- Siavash

4

可能是嵌套的vue.js实例/元素的重复问题。 - Mohammad Fanni

不，这是不可能的。 - Bert

1

你需要将组件和路由合并到一个应用程序中 :) - Andrey Popov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Usama Ejaz · Accepted Answer

如果您确实需要嵌套的实例，请使用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 }} 的子实例将会是“sth else”。请注意，由于v-pre指令的存在，嵌套实例(#child元素)不会被 Vue 父实例编译。