使用Vue实现页面间传值的技巧 - 从开发工程师的角度看Vue

发布时间：2023-05-19

一、Vue实现页面传值的方法

在Vue中，可以通过父子组件间传值，通过路由传参，或通过Vuex状态管理传值。

1、父子组件间传值

<template>
  <div>
    <child :msg="msg"></child>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: 'Hello, World!'
      }
    },
    components: {
      child: {
        props: ['msg'],
        template: '<div>{{ msg }}</div>'
      }
    }
  }
</script>

在上述代码中，父组件通过props将数据传递给子组件，子组件通过在模板中使用msg来接收这个值。

2、路由传参

// router.js
const routes = [
  {
    path: '/page1',
    name: 'Page1',
    component: Page1,
    props: { msg: 'Hello, World!' }
  },
  {
    path: '/page2',
    name: 'Page2',
    component: Page2,
    props: (route) => ({ msg: route.query.msg })
  }
]
// Page1.vue
<template>
  <div>
    <h2>{{ msg }}</h2>
    <router-link to="/page2?msg=Hello,%20World!">跳转到Page2</router-link>
  </div>
</template>
// Page2.vue
<template>
  <div>
    <h2>{{ msg }}</h2>
  </div>
</template>
<script>
  export default {
    props: ['msg']
  }
</script>

在上述代码中，路由的props选项可以是一个常规对象或者一个函数。在Page1组件中，通过<router-link>标签跳转到Page2组件，并将msg作为query参数传递过去。在Page2组件中，通过props接收这个值。

3、Vuex状态管理传值

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    msg: 'Hello, World!'
  },
  mutations: {
    setMsg(state, newMsg) {
      state.msg = newMsg
    }
  },
  actions: {
    updateMsg({ commit }, newMsg) {
      commit('setMsg', newMsg)
    }
  },
  getters: {
    msg: (state) => state.msg
  }
})
// Page1.vue
<template>
  <div>
    <h2>{{ msg }}</h2>
    <button @click="updateMsg">更新msg</button>
  </div>
</template>
<script>
  import { mapGetters, mapActions } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['msg'])
    },
    methods: {
      ...mapActions(['updateMsg'])
    }
  }
</script>
// Page2.vue
<template>
  <div>
    <h2>{{ msg }}</h2>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['msg'])
    }
  }
</script>

在上述代码中，使用Vuex可以在组件之间共享数据。在Page1组件中，通过按钮触发updateMsg方法更新msg的值，在Page2组件中，通过mapGetters将msg映射到组件中。

二、使用Vue Router实现页面传值的技巧

在Vue Router中，可以通过query、params或meta等选项传递数据。

1、query传参

// router.js
const routes = [
  {
    path: '/page1',
    name: 'Page1',
    component: Page1
  },
  {
    path: '/page2',
    name: 'Page2',
    component: Page2
  }
]
// Page1.vue
<template>
  <div>
    <router-link :to="{ path: '/page2', query: { msg: 'Hello, World!' } }">跳转到Page2</router-link>
  </div>
</template>
// Page2.vue
<template>
  <div>
    <h2>{{ $route.query.msg }}</h2>
  </div>
</template>

在上述代码中，通过<router-link>标签跳转到Page2组件，并将msg作为query参数传递过去。在Page2组件中，通过$route.query.msg接收这个值。

2、params传参

// router.js
const routes = [
  {
    path: '/page1/:msg',
    name: 'Page1',
    component: Page1
  },
  {
    path: '/page2/:msg',
    name: 'Page2',
    component: Page2
  }
]
// Page1.vue
<template>
  <div>
    <router-link :to="{ name: 'Page2', params: { msg: 'Hello, World!' } }">跳转到Page2</router-link>
  </div>
</template>
// Page2.vue
<template>
  <div>
    <h2>{{ $route.params.msg }}</h2>
  </div>
</template>

在上述代码中，通过<router-link>标签跳转到Page2组件，并将msg作为params参数传递过去。在router.js中，Page1和Page2组件的path都定义了params，即必须要有msg这个参数。在Page2组件中，通过$route.params.msg接收这个值。

3、meta传参

// router.js
const routes = [
  {
    path: '/page1',
    name: 'Page1',
    component: Page1
  },
  {
    path: '/page2',
    name: 'Page2',
    component: Page2,
    meta: { msg: 'Hello, World!' }
  }
]
// Page1.vue
<template>
  <div>
    <router-link to="/page2">跳转到Page2</router-link>
  </div>
</template>
<script>
  export default {
    beforeRouteEnter(to, from, next) {
      next(vm => {
        console.log(vm.$route.meta.msg) // 'Hello, World!'
      })
    }
  }
</script>
// Page2.vue
<template>
  <div>
    <h2>{{ $route.meta.msg }}</h2>
  </div>
</template>

在上述代码中，通过meta选项传递数据时，需要在路由定义时添加meta对象。在Page1组件中，通过<router-link>标签跳转到Page2组件。在Page1组件的beforeRouteEnter钩子函数中，通过vm.$route.meta.msg获取到Page2组件的meta数据。在Page2组件中，通过$route.meta.msg接收这个值。

三、从组件生命周期钩子函数看页面传值的实现

在组件的生命周期钩子函数中，可以通过$route、$router等对象获取到路由或路由参数，从而实现页面传值。

1、beforeRouteEnter

// Page2.vue
<template>
  <div>
    <h2>{{ msg }}</h2>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: ''
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.msg = to.params.msg
      })
    }
  }
</script>

在上述代码中，通过beforeRouteEnter钩子函数获取到组件的路由参数，并在组件的data中定义msg接收这个值。

2、beforeRouteUpdate

// Page2.vue
<template>
  <div>
    <h2>{{ msg }}</h2>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: ''
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.msg = to.params.msg
      })
    },
    beforeRouteUpdate(to, from, next) {
      this.msg = to.params.msg
      next()
    }
  }
</script>

在上述代码中，在组件的beforeRouteEnter钩子函数中获取路由参数并更新组件的data，当路由参数更新时，将再次调用beforeRouteUpdate钩子函数，并通过this.msg = to.params.msg更新组件的data。

四、总结

通过上述的介绍，我们了解了Vue在不同场景下实现页面传值的方法，以及在组件生命周期钩子函数中实现页面传值的技巧。在Vue开发中，对于页面传值的处理，应根据具体情况选择合适的方式，以及灵活运用钩子函数进行处理。

推荐文章