另一个Vue实例中的Vue实例

Question

我正在将Vue与一个名为AEM的CMS进行集成，该CMS基本上可以像Vue一样作为组件基础系统工作。而不是有一个网页和进口的。vue文件，此CMS上的每个组件都是一个新的vue实例（新的vue（{…}））。因此，在我的页面上，有许多Veu实例使用同一个存储（vuex）彼此通信。

这实际上工作得很好，但我有一个场景，当我需要一个CMS组件在另一个组件中时。由于这两个组件都是唯一的vue实例，并且父级的“el”属性包含子级的“el”，因此子组件无法工作。

我知道这不是这个库的预期用途，但是有没有办法在两个vue实例上告诉或共享相同的“上下文”，甚至是这个场景的另一种方法。

谢谢，亚历山大。

Answer 1

解决方案：

>

替换所有新Vue（...）东西到Vue.component（...）Vue.extend（...）等更好的接口管理。

仅使用ONEVue实例女巫是new Vue（{...选项}）

Answer 2

您应该只使用一个Vue实例，如前面提到的。

如果您继续为每个组件实例化Vue实例，您将在调试或组件通信时遇到问题，总的来说，这变得非常糟糕，您将错过Vue提供的父子通信和继承。

我不知道你的Vue架构，但我目前正在编写一份在AEM与Vue合作的手册。

基本的前提是使用Vue的inline-模板和vanilla-js，在构建时没有typecript，nodeJS build，jsx或其他任何东西，只有vanilla-js，这样当你的页面加载时，甚至在你的js包出现之前，DOM在那里，您只需要通过实例化一个将装载所有组件的Vue实例来装载组件。这对搜索引擎优化来说也很棒（除非你计划在java中呈现服务器端的Vue组件...这在理论上是可能的，但是祝你好运！）

以下是AEM/Vue组件示例：

  <simple-counter inline-template>
    <button v-bind:style="style" v-on:click="add">${properties.clicksText || 'clicks: '} {{ counter }}</button>
  </simple-counter>

JS：

注意，它在JS中没有模板，因为它在上面是内联的

Vue.component('simple-counter', {
  data: function() {
    return {
      counter: 0,
      style: {
        color: 'red',
        width: '200px'
      }
    }
  },
  methods: {
    add: function() {
      this.counter = this.counter + 1;
      this.style.color = this.style.color == 'red' ? 'green' : 'red';
    }
  }
})

您可以以这种方式构建更多AEM组件，然后在客户端库结束时，当所有Vue组件都已注册后，您可以运行：

newvue（{el:'#app'}）

当然，这是假设您的页面主体或其他父元素的id为：app。

第二部分，如何在提交创作对话框后重新装载组件，您可以刷新页面。

我有一个关于如何在不刷新页面的情况下重新装载组件的问题，这里的基本思想是在组件中添加afteredit事件，并仅在新修改的组件上运行新的Vue实例。。。还在做那件事吗

Answer 3

应该只有一个Vue实例。

• 我建议您在body标记中创建一个空的Vue实例
• 所有现有的Vue实例都转换为组件
• 在根Vue实例中注册所有组件

使用这种方法，可以将一个组件嵌套到另一个组件中