Question

我正在将Vue与一个名为AEM的CMS集成，它基本上像Vue一样用作组件基础系统。但是，不使用webpack和导入.vue文件，此CMS上的每个组件都是新的Vue实例（新的Vue（{...}））。所以在我的页面上我有很多Veu实例使用同一个商店（vuex）相互通信。

这实际上工作正常，但我有一个场景，当我需要另一个CMS组件。由于这两个组件都是唯一的vue实例，而父组件中的“el”属性包含子组件中的“el”，因此子组件不起作用。

我知道这不是这个lib的预期用法，但是我可以告诉或分享两个vue实例上的相同“上下文”，甚至是这个场景的另一种方法。

THX，亚历山大。

Answer 1

应该只有一个Vue实例。

我建议你在body标签
您现有的所有Vue实例都转换为组件
注册根Vue实例中的所有组件

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

Answer 2

您应该只使用一个 Vue实例作为@shrpne提及。

如果你继续为每个组件实例化Vue实例，那么在调试或使用组件通信时你会遇到问题，总体来说这会变得非常烦人，你错过了Vue提供的父子通信和继承。

我不了解您的Vue架构，但我目前正在制作一份在AEM中使用Vue的手册。

基本前提是在构建时使用Vue的inline-template和vanilla-js，No typescript，nodeJS build，jsx或其他任何东西，只需使用vanilla-js，这样当你的页面被加载时即使在你的js包存在之前，DOM已经存在，你只需要通过实例化一个将安装所有组件的Vue实例来安装组件。这对SEO也很有用（除非你打算在服务器端渲染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组件，然后在您的clientlib结束时注册所有Vue组件后，您可以运行：

new Vue({ el: '#app'})

当然，这假设您的网页body或其他一些父元素的ID为app。

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

我对如何在不刷新页面的情况下重新安装组件有疑问here 基本思想是向组件添加afteredit事件，并仅在新变异的组件上运行新的Vue实例... 仍在处理

Answer 3

解决方案：

将所有new Vue(...)内容替换为Vue.component(...) Vue.extend(...)等，以便更好地进行界面管理。
仅使用 ONE Vue实例女巫new Vue({...options})
将vuex商店分成模块。
Google老师知道一切。

另一个Vue实例中的Vue实例

3 个答案: