在 Vue 的不同视图之间传递一个 prop

Question

我正在学习 Vue，我在这个问题上坚持了几天。希望您能帮我找到解决办法。

问题： 然后我怎样才能将该道具传递给 Page3.vue 或 Page2.vue 或反之亦然？ 有没有办法以某种方式保存这个道具并在视图之间切换而不会丢失它？ 最佳做法是什么？

Answer 1

正如@Jujubes 在 cmets 中所说，使用 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 或其他库来处理。

Answer 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>

您可以看到AppMain 组件中选择的item id 在页面视图更改时保持不变。这是因为在路由上使用了props: true - 这意味着:id 作为prop (props -> true) 传递给路由上的组件。