带有子vue实例的vue实例是可行的还是替代方法？

问题描述

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

是否可以在Vue实例的div中打包其他几个vuejs实例（具有相同的内容）？

我想以某种方式多次将实例与商店和路由器集成，但我无法弄清楚。

如果有人可以在这里帮助我，也许提供链接或方法，将很有帮助。

我正在寻找一种方法，可以最多同时显示路线和嵌套路线同时显示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实例实现，但是每张卡都有自己的“路由器”。

也许有人对它的外观有所了解。

解决方法

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

编辑：

我刚刚了解了rtweet，该指令可防止Vue“编译” HTML节点及其子节点。 只要将v-pre放在用于挂载子Vue应用程序的标签上，即使嵌套了它们，您基本上也可以拥有尽可能多的Vue实例。 这是一个有效的小提琴https://jsfiddle.net/dja36s7x/18/

,

这似乎可以通过使用组件层次结构来实现。如果您确定需要不同的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');

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

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

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

,

我在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。