子vue实例的vue实例是可能的还是可选的？

Question

我想开发一个4K显示器的vuejs多点触控应用程序。它大约是3-4张在背景上的卡片，实际上显示了相同的内容。对于每一张卡，都可以看到不同的入口页面。

是否可以将其他几个vuejs实例(具有相同的内容)打包到一个Vue实例中的div中？

不知何故，我想多次将一个实例与存储和路由器集成在一起，但我无法弄清楚。

如果有人能在这里帮助我，也许能提供一个链接或一种方法，那将是有帮助的。

我正在寻找一种方法，我可以显示相同的内容在同一时间3次，最好的路线和嵌套路线。每个用户都可以单独导航，每个人都有自己的历史通过GUI。

当我尝试在主vue实例3个不同的路由器中使用2个实例时，它总是呈现主路由的内容。

我发现了一个实例并排的例子，效果很好：https://jsfiddle.net/m91e7s2v/，但不在父实例中？为什么？

app.vue内幕

<div id="app">
 <VueToolMultitouch class="schatten" :startX="100" :startY="100" :startColor='"#00FF00"'  id="id1" :idName="'id1'" :startZ="2">
          
<div id="subapp1">
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <p>Route path: {{ $route.path }}</p>
  <router-view></router-view>
</div>
<h2>Passing Text 1</h2>

</VueToolMultitouch> 


<VueToolMultitouch class="schatten" :startX="200" :startY="600" :startColor='"#FF0000"'  id="id2" :idName="'id2'" :startZ="3"> 
  
    <div id="subapp2">
        <router-link to="/">/home</router-link>
        <router-link to="/foo">/foo</router-link>
        <p>Route path: {{ $route.path }}</p>
        <router-view></router-view>
    </div>
    <h2>Passing Text 2</h2>

</VueToolMultitouch> 

</div>

main.js内幕

import router1 from "./router/router";
import router1 from "./router/router-1";
import router2 from "./router/router-2";


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

new Vue({
   router: router1,
}).$mount("#subapp1");

new Vue({
   router: router2,
}).$mount("#subapp2");

另一种选择是，如果所有内容都使用单个vue实例实现，但每个卡都有自己的“路由器”。

也许有人知道那会是什么样子。

Answer 1

问题是，每个孩子都会绑定到父vue应用程序及其原型，这会覆盖孩子的路由器。我认为你需要要么为孩子使用iframe，要么让父应用处理state孩子的视图。

编辑：

我刚刚了解到v-pre，这个指令阻止Vue“编译”一个超文本标记语言节点及其子节点。你基本上可以有尽可能多的Vue实例，即使它们是嵌套的，只要你把v-pre放在你用来挂载子Vue应用程序的标签上。这是一个有效的小提琴https://jsfiddle.net/dja36s7x/18/

Answer 2

这似乎可以使用组件的层次结构来实现。如果你确定你需要不同的Vue应用实例，那么使用Vue 3是值得的，因为它放弃了shared global config的想法，允许你用createApp创建许多Vue实例。都有不同的配置。

您可以这样做(JS Fiddle here)：

Vue.createApp({
    name: 'App',
    template: `
        <h1>Primary App</h1>

        <div id="subAppOne"></div>
        <div id="subAppTwo"></div>
        <div id="subAppThree"></div>
    `
}).mount('#app');

Vue.createApp({
    name: 'AppOne',
    template: `<h2>App One</h2>`,
}).mount('#subAppOne');

Vue.createApp({
    name: 'AppTwo',
    template: `<h2>App Two</h2>`,
}).mount('#subAppTwo');

Vue.createApp({
    name: 'App Three',
    template: `<h2>App Three</h2>`,
}).mount('#subAppThree');

在调用mount()之前，您可以在每个应用程序实例上使用.use()指定不同的路由器。

const routerOne = VueRouter.createRouter({
    history: VueRouter.createWebHistory(),
    routes: [/* … */],
});

Vue.createApp({/* … */}).use(routerOne).mount('#appOne');

Answer 3

我在VueJS论坛上找到了另一种方法。

<div id="app">
  <div class="row">
    <my-child1></my-child1>
    <my-child2></my-child2>
  </div>
  <div class="row">
    <my-child3></my-child3>
    <my-child4></my-child4>
  </div>
</div>

const routes = [
  {
    path: '/page1',
    component: { template: '<p>Page 1</p>' }
  }, {
    path: '/page2',
    component: { template: '<p>Page 2</p>' }
  }, {
    path: '/page3',
    component: { template: '<p>Page 3</p>' }
    }
]

const MyChild = {
  template: `
    <div>
      <router-link to="/page1">Page 1</router-link>
      <router-link to="/page2">Page 2</router-link>
      <router-link to="/page3">Page 3</router-link>
      <button @click="$router.back()">Back</button>
      <div>{{ $route.path }}</div>
      <router-view />
    </div>
  `
}

function getChild() {
    return {
    extends: MyChild,
    router: new VueRouter({
      mode: 'abstract',
      routes
    })
  }
}

new Vue({
  components: {
    MyChild1: getChild(),
    MyChild2: getChild(),
    MyChild3: getChild(),
    MyChild4: getChild()
  }
}).$mount('#app')

JSFiddle Example

在这里，组件使用自己的路由器进行扩展。

我目前不再需要通过嵌套实例的路由。但我会在每个人身上测试v-pre