另一个实例视图中的实例视图

Posted 2021-04-08

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

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

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

Thx，Alexandre。

答案

应该只有一个Vue实例。

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

使用这种方法，将一个组件嵌套到另一个组件中会很好

另一答案

您应该只使用一个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实例...仍在继续

另一答案

解：

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