Блог

Я хотел бы разработать мультитач-приложение vuejs для дисплея 4K. Это примерно 3-4 карточки, которые находятся на заднем плане и фактически показывают одно и то же содержимое. Для каждой из карточек отображается отдельная страница ввода.

Возможно ли упаковать несколько других экземпляров (с тем же содержимым) vuejs в divs в экземпляре Vue?

Каким-то образом я хотел бы интегрировать экземпляр с хранилищем и маршрутизатором несколько раз, но я не могу понять это.

Было бы полезно, если бы кто-нибудь мог мне здесь помочь, возможно, предоставить ссылку или подход.

Я ищу подход, как я могу отображать одно и то же содержимое 3 раза одновременно, в лучшем случае с маршрутами и вложенными маршрутами. Каждый пользователь может перемещаться отдельно, у каждого есть своя история через графический интерфейс.

когда я пытаюсь использовать 2 экземпляра внутри основного экземпляра vue на 3 разных маршрутизаторах, он всегда отображает содержимое основного маршрута.

Я нашел этот пример, в котором экземпляры находятся рядом, отлично работает: 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 и его прототипу, это переопределяет маршрутизатор дочерних элементов. Я думаю, что вам нужно будет либо использовать iframes для дочерних элементов, либо сделать родительское приложение дескриптором с указанием дочерних представлений.

Редактировать:

Я только что узнал v-pre , что эта директива запрещает Vue «компилировать» HTML-узел и его дочерние элементы. В принципе, у вас может быть столько экземпляров Vue, даже если они вложены, если вы добавляете v-pre тег, который используете для монтирования дочернего приложения Vue. Вот рабочая скрипка https://jsfiddle.net/dja36s7x/18 /

Я нашел альтернативный способ на форуме 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

Здесь компоненты расширяются с помощью их собственного маршрутизатора.

В настоящее время мне больше не нужен маршрут через вложенные экземпляры. но я протестирую v-pre на всех.

Кажется, это может быть достигнуто с помощью иерархии компонентов. Если вы уверены, что вам нужны разные экземпляры приложения Vue, тогда стоит пойти с Vue 3 ним, поскольку он отказался от идеи a shared global config , позволяя вам создавать множество экземпляров Vue createApp . Все с разными конфигурациями.

Вы могли бы сделать что-то вроде этого (JS Fiddle здесь):

 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');