Vue 中页面传值的多种方式详解

﹏ヽ暗。殇╰゛Y 2023-10-12 19:41 6阅读 0赞

## 系列文章目录 ##

--------------------

#### 文章目录 ####

*  系列文章目录
 *  前言
 *  一、通过路由传参
 *  二、通过 Vuex 进行状态管理
 *  三、通过 Props 属性传值
 *  四、通过事件传递数据
 *  总结

--------------------

## 前言 ##

在 Vue 开发中，页面间的数据传递是一个常见的需求。为了实现页面间的交互和数据传递，Vue 提供了多种方式供开发者使用。本文将详细介绍 Vue 中页面传值的多种方式，帮助您根据具体场景选择合适的方法进行数据传递。

--------------------

## 一、通过路由传参 ##

Vue 路由是一种常见的页面导航和参数传递方式。可以通过路由的方式在页面之间传递参数。

通过路由参数传值：可以通过路由的动态参数或查询参数传递数据。在源页面设置参数，然后在目标页面通过 $route.params 或 $route.query 访问参数。  
示例代码：

// 路由配置
    const router = new VueRouter({
        
      routes: [
        {
        
          path: '/source/:id',
          component: SourceComponent,
        },
        // 其他路由配置...
      ],
    });
    
    // 源页面
    <template>
      <router-link :to="{ path: '/source/1' }">跳转到目标页面</router-link>
    </template>
    
    // 目标页面
    <template>
      <div>
        <p>参数传递的值：{
        {
         $route.params.id }}</p>
      </div>
    </template>

通过路由状态传值：可以通过路由的状态对象传递数据。在源页面设置状态对象，然后在目标页面通过 $route.meta 访问状态对象。  
示例代码：

// 路由配置
    const router = new VueRouter({
        
      routes: [
        {
        
          path: '/source',
          component: SourceComponent,
          meta: {
        
            data: {
        
              id: 1,
              name: 'John',
            },
          },
        },
        // 其他路由配置...
      ],
    });
    
    // 目标页面
    <template>
      <div>
        <p>参数传递的值：{
        {
         $route.meta.data.id }}</p>
      </div>
    </template>

## 二、通过 Vuex 进行状态管理 ##

Vuex 是 Vue 的状态管理工具，通过在 Vuex 中定义和管理状态，可以在不同页面之间共享和传递数据。

在源页面设置状态值：通过在源页面的组件中提交 Vuex 的 mutation，修改 Vuex 中的状态值。  
示例代码：

// Vuex 配置
    const store = new Vuex.Store({
        
      state: {
        
        value: '',
      },
      mutations: {
        
        setValue(state, value) {
        
          state.value = value;
        },
      },
    });
    
    // 源页面
    <template>
      <div>
        <input v-model="value" />
        <button @click="setValue">传递参数</button>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          value: '',
        };
      },
      methods: {
        
        setValue() {
        
          this.$store.commit('setValue', this.value);
        },
      },
    };
    </script>

## 三、通过 Props 属性传值 ##

在 Vue 中，通过父组件传递数据给子组件是一种常见的传值方式。可以通过在子组件的 props 属性中声明需要接收的数据，然后在父组件中通过绑定属性的方式传递数据给子组件。

示例代码：

// 子组件
    <template>
      <div>
        <p>参数传递的值：{
        {
         value }}</p>
      </div>
    </template>
    
    <script>
    export default {
        
      props: {
        
        value: {
        
          type: String,
          required: true,
        },
      },
    };
    </script>
    
    // 父组件
    <template>
      <div>
        <child-component :value="data"></child-component>
      </div>
    </template>
    
    <script>
    import ChildComponent from './ChildComponent.vue';
    
    export default {
        
      components: {
        
        ChildComponent,
      },
      data() {
        
        return {
        
          data: '传递的值',
        };
      },
    };
    </script>

## 四、通过事件传递数据 ##

在 Vue 中，组件之间可以通过自定义事件进行数据的传递。可以通过在父组件中定义事件，然后在子组件中通过 $emit 方法触发事件，并传递数据。

示例代码：

// 子组件
    <template>
      <div>
        <button @click="handleClick">传递参数</button>
      </div>
    </template>
    
    <script>
    export default {
        
      methods: {
        
        handleClick() {
        
          this.$emit('event-name', '传递的值');
        },
      },
    };
    </script>
    
    // 父组件
    <template>
      <div>
        <child-component @event-name="handleEvent"></child-component>
      </div>
    </template>
    
    <script>
    import ChildComponent from './ChildComponent.vue';
    
    export default {
        
      components: {
        
        ChildComponent,
      },
      methods: {
        
        handleEvent(value) {
        
          console.log(value); // 输出：传递的值
        },
      },
    };
    </script>

## 总结 ##

通过路由传参、Vuex 状态管理、Props 属性和事件传递数据是 Vue 中常见的页面传值方式。根据具体场景和需求，选择合适的方法可以实现灵活的数据传递和页面间的交互。

希望本文对您在 Vue 开发中页面传值的方法有所帮助。如有任何疑问或意见，欢迎留言讨论。感谢阅读！

**需要系统源码或者BiShe加V  
ID:talon712**