Блог

Главная - Вопросы по программированию - Передайте опору между различными видами в Vue

Передайте опору между различными видами в Vue

#vue.js #view #vue-props

Вопрос:

Я изучаю Vue и застрял на этой проблеме на несколько дней. Я надеюсь, что вы сможете помочь мне найти решение.

введите описание изображения здесь

Вопросы: Как я могу затем передать эту опору на страницу 3.vue или страницу 2.vue или наоборот? Есть ли способ каким-то образом сохранить эту опору и продолжать переключаться между видами, не теряя ее? Какая лучшая практика?

Комментарии:

1. вы пробовали nuxt? nuxtjs.org — это платформа vue, которая обрабатывает множество базовых функций, включая маршрутизацию. Как правило, вы используете хранилище, такое как VUEX, для обработки более глобальных(общих) состояний

2. Спасибо, «Магазин VUEX» — это то, что я искал 🙂 И я взгляну на nuxt.js тоже.

3. Vuex и Nuxt добавляют дополнительную сложность проекту. Это ДЕЙСТВИТЕЛЬНО классные инструменты, но я бы представил их только в том случае, если уверен, что они мне нужны. Передача идентификатора в качестве параметра URL ниже порогового значения для любого из этих инструментов: Vue и VueRouter прекрасно справятся с этим.

4. Предполагая, что вы создаете приложение, а не библиотеку: @muka.gergely не согласен с тем, что Nuxt «добавляет сложности», поскольку он обрабатывает так много крошечных задач, которые распространены среди приложений/проектов. Таким образом, это упрощает многие процессы. Кроме того, он позволяет использовать модули VUEX и красиво их организует(также стандартизировано).

5. @Jujubes, но вам не нужен Vuex для всех проектов Vue. Вам не нужен Nuxt для всех проектов Vue. Не могли бы вы добавить требование к знаниям Flux? Вы бы добавили client-only что-нибудь в проект? Почему? OP хочет только передать идентификатор в приложении и уже имеет VueRouter в проекте.

Ответ №1:

Как сказал @Jujubes в комментариях, для этого неплохо использовать Vuex или другую библиотеку. Но, если вы просто хотите узнать, как информация проходит через компоненты, вы можете использовать $emit для отправки UID обратно в родительский компонент, а затем отправить его другим компонентам.

Попробуйте что-нибудь вроде этого:

Main.vue:

 <template>
  <div>
    ...
    <child-component-1 @newuid="receiveUid"></child-component-1>
    <child-component-2 :uid="uid"></child-component-2>
  </div>
</template>

<script>
...

export default {
  ...
  data() {
    return {
      uid: null,
    }
  },
  methods: {
    receiveUid(uid) {
      this.uid = uid
    }
  }
}
</script>

А затем в вашем дочернем компоненте 1, когда вы создаете UID, вы отправляете его родительскому компоненту:

 <script>
...

export default {
  ...
  data() {
    return {
      uid: null,
    }
  },
  methods: {
    generateUid() {
      this.uid = this.getUidFunctionExample()
      this.$emit('newuid', this.uid)
    }
  }
}
</script>

Это основная идея. Проблема в том, чтобы масштабировать ваше приложение. Это превращается в действительно грязное решение. На этом этапе я предлагаю вам добавить Vuex или другую библиотеку для решения этой проблемы.

Ответ №2:

Не совсем ясно, чего вы хотите достичь, но я пытаюсь дать решение для идеи, которую я понял:

 const AppNavbar = {
  props: ['id', 'items'],
  template: `
    <div>
       <div
        v-for="item in items"
        :key="item.id"
       >
        <router-link :to="item.route   '/'   id">{{ item.name }}</router-link>
       </div>
    </div>
  `
}

const AppMain = {
  props: ["items"],
  template: `
    <div>
       <div
        v-for="item in items"
        :key="item.id"
       >
        <router-link :to="item.route   '/'   item.id">{{ item.name }}</router-link>
       </div>
    </div>
  `
}

const Page1 = {
  props: ['id', 'items'],
  components: {
    AppNavbar,
  },
  template: `
    <div>
      <div>
        <router-link to="/">BACK TO MAIN</router-link>
      </div>
      <div>
        <app-navbar :id="id" :items="items" />
      </div>
      <div>
        Page1 component<br />
        Passed ID: {{ id }}<br />
        Route: {{ $router.currentRoute.path }}
      </div>
    </div>
  `
}

const Page2 = {
  props: ['id', 'items'],
  components: {
    AppNavbar,
  },
  template: `
    <div>
      <div>
        <router-link to="/">BACK TO MAIN</router-link>
      </div>
      <div>
        <app-navbar :id="id" :items="items" />
      </div>
      <div>
        Page2 component<br />
        Passed ID: {{ id }}<br />
        Route: {{ $router.currentRoute.path }}
      </div>
    </div>
  `
}

const Page3 = {
  props: ['id', 'items'],
  components: {
    AppNavbar,
  },
  template: `
    <div>
      <div>
        <router-link to="/">BACK TO MAIN</router-link>
      </div>
      <div>
        <app-navbar :id="id" :items="items" />
      </div>
      <div>
        Page3 component<br />
        Passed ID: {{ id }}<br />
        Route: {{ $router.currentRoute.path }}
      </div>
    </div>
  `
}

const routes = [{
    path: "/",
    component: AppMain,
  },
  {
    path: "/page1/:id",
    component: Page1,
    props: true
  },
  {
    path: "/page2/:id",
    component: Page2,
    props: true
  },
  {
    path: "/page3/:id",
    component: Page3,
    props: true
  },
]

const router = new VueRouter({
  routes,
})

new Vue({
  el: "#app",
  router,
  components: {
    AppMain,
    Page1,
  },
  data() {
    return {
      items: [{
          id: "id1",
          route: "/page1",
          name: "Item 1",
        },
        {
          id: "id2",
          route: "/page2",
          name: "Item 2",
        },
        {
          id: "id3",
          route: "/page3",
          name: "Item 3",
        }
      ]
    }
  },
  template: `
    <div>
      <router-view :items="items" />
    </div>
  `
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app"></div>

Вы можете видеть, что item id выбранный в AppMain компоненте сохраняется при изменении вида страницы. Это связано с тем, что props: true используется на маршрутах — и это означает, что :id передается компоненту на маршруте в качестве prop ( props -> true ).

Метки: