在 Vue 中的不同视图之间传递道具

Question

我正在学习 Vue，这几天一直被这个问题困扰。我希望你能帮我找到解决办法。

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

Answer 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 或其他库来处理这个问题。

Answer 2

不是crystal说清楚你要实现什么，但是我尝试给出一个我理解的思路的解决方案：

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) 传递给路由上的组件。

在 Vue 中的不同视图之间传递道具

Pass a prop between different views in Vue

view

vue.js

vue-props