vue页面之间如何传值

在Vue.js中，页面之间传值有多种方法，主要有以下几种：1、使用Vuex进行状态管理，2、通过props和事件传递，3、使用$emit和$on进行组件通信，4、使用路由参数，5、使用Event Bus进行全局事件总线通信。接下来将详细描述这些方法。

一、使用Vuex进行状态管理

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式，通过集中式存储管理应用的所有组件的状态。

安装Vuex：
```
npm install vuex --save
```

创建store:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        sharedData: ''
    },
    mutations: {
        setSharedData(state, data) {
            state.sharedData = data;
        }
    },
    actions: {
        updateSharedData({ commit }, data) {
            commit('setSharedData', data);
        }
    }
});

在组件中使用：

在发送数据的组件中：

this.$store.dispatch('updateSharedData', 'new data');

在接收数据的组件中：

computed: {
    sharedData() {
        return this.$store.state.sharedData;
    }
}

二、通过props和事件传递

在父子组件之间传值，props和事件是最基本且常用的方法。

父组件传值给子组件：

<!-- ParentComponent.vue -->
<template>
    <ChildComponent :data="parentData"/>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
    data() {
        return {
            parentData: 'Data from parent'
        };
    },
    components: {
        ChildComponent
    }
};
</script>

<!-- ChildComponent.vue -->
<template>
    <div>{{ data }}</div>
</template>
<script>
export default {
    props: ['data']
};
</script>

子组件向父组件传值：

<!-- ChildComponent.vue -->
<template>
    <button @click="sendData">Send Data</button>
</template>
<script>
export default {
    methods: {
        sendData() {
            this.$emit('dataFromChild', 'Data from child');
        }
    }
};
</script>

<!-- ParentComponent.vue -->
<template>
    <ChildComponent @dataFromChild="handleData"/>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
    methods: {
        handleData(data) {
            console.log(data); // 'Data from child'
        }
    },
    components: {
        ChildComponent
    }
};
</script>

三、使用$emit和$on进行组件通信

$emit和$on可以在非父子组件之间进行通信，主要用于兄弟组件之间的数据传递。

创建EventBus：

import Vue from 'vue';
export const EventBus = new Vue();

在组件中使用EventBus：

发送数据的组件：

EventBus.$emit('updateData', 'Data to share');

接收数据的组件：

created() {
    EventBus.$on('updateData', (data) => {
        console.log(data); // 'Data to share'
    });
}

四、使用路由参数

路由参数可以在页面跳转时传递数据，适用于需要在页面之间传递数据的场景。

设置路由参数：

const routes = [
    { path: '/page/:id', component: PageComponent }
];

在路由跳转时传递参数：

this.$router.push({ path: `/page/${data}` });

在目标组件中接收参数：

export default {
    mounted() {
        console.log(this.$route.params.id);
    }
};

五、使用Event Bus进行全局事件总线通信

Event Bus 是一种通过事件机制进行组件间通信的方式，适用于跨级组件通信。

创建Event Bus：

import Vue from 'vue';
export const EventBus = new Vue();

在组件中使用Event Bus：

发送数据的组件：

EventBus.$emit('eventName', 'data');

接收数据的组件：

created() {
    EventBus.$on('eventName', (data) => {
        console.log(data);
    });
}

总结：在Vue.js中，页面之间传值的方法多种多样，可以根据具体需求选择最合适的方法。如果数据需要全局管理和共享，建议使用Vuex进行状态管理；在父子组件之间传值，props和事件是最基本的方法；对于兄弟组件和跨级组件通信，Event Bus 和 $emit/$on 是不错的选择；而在页面跳转时传递数据，使用路由参数是最方便的方式。根据具体场景选择合适的方法，可以更高效地进行数据传递和状态管理。