在 Vue 中，参数传递是组件间通信的重要方式，主要分为**父组件向子组件传递参数（props）**、**子组件向父组件传递参数（$emit）**，以及**路由参数传递**三种方式。以下是详细的参数传递类型说明：
### 1. 父组件向子组件传递参数（props）
子组件通过 `props` 接收来自父组件的数据，可以定义数据类型、默认值、是否必需等。支持的数据类型包括：`String`、`Number`、`Boolean`、`Array`、`Object`、`Function`、`Symbol` 等。
```vue
<!-- 父组件 -->
<template>
<child-component :message="parentMessage" :isVisible="true" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
parentMessage: 'Hello from parent',
};
},
};
</script>
```
```vue
<!-- 子组件 -->
<script>
export default {
props: {
message: String,
isVisible: {
type: Boolean,
default: false,
},
},
};
</script>
```
通过这种方式，父组件可以将任意类型的数据传递给子组件[^2]。
---
### 2. 子组件向父组件传递参数（$emit）
子组件通过 `$emit` 触发自定义事件，并将参数传递给父组件。通常用于通知父组件某些操作完成或传递数据。
```vue
<!-- 子组件 -->
<template>
<button @click="sendToParent">Send to Parent</button>
</template>
<script>
export default {
methods: {
sendToParent() {
this.$emit('child-event', 'Data from child');
},
},
};
</script>
```
```vue
<!-- 父组件 -->
<template>
<child-component @child-event="handleChildEvent" />
</template>
<script>
export default {
methods: {
handleChildEvent(data) {
console.log(data); // 输出：Data from child
},
},
};
</script>
```
这种方式适用于子组件向父组件发送事件和数据[^2]。
---
### 3. 路由参数传递
在 Vue Router 中，可以通过路由配置传递参数。常见方式有命名路由传递参数和动态路由匹配。
#### 命名路由传参
```vue
<router-link :to="{ name: 'UserProfile', params: { id: 123 }}">User Profile</router-link>
```
在目标组件中可以通过 `$route.params.id` 获取参数：
```javascript
export default {
mounted() {
console.log(this.$route.params.id); // 输出：123
},
};
```
#### 动态路由匹配
在路由配置中定义参数：
```javascript
{
path: '/user/:id',
name: 'UserProfile',
component: () => import('../views/UserProfile.vue')
}
```
访问 `/user/456` 时，组件中可通过 `$route.params.id` 获取值 `456` [^1]。
---
### 4. 兄弟组件间通信（通过事件总线或 Vuex）
当两个组件之间没有直接父子关系时，可以通过**事件总线（Event Bus）**或**Vuex 状态管理库**进行通信。
#### 事件总线示例：
```javascript
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
```
```vue
<!-- 组件A -->
<script>
import { EventBus } from './event-bus.js';
export default {
methods: {
sendData() {
EventBus.$emit('data-event', 'Data from Component A');
},
},
};
</script>
```
```vue
<!-- 组件B -->
<script>
import { EventBus } from './event-bus.js';
export default {
mounted() {
EventBus.$on('data-event', (data) => {
console.log(data); // 输出：Data from Component A
});
},
};
</script>
```
---
### 5. 全局状态管理（Vuex）
对于大型应用，推荐使用 Vuex 来管理全局状态，组件之间可以通过 `store` 获取或修改共享数据。
```javascript
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
},
actions: {
increment({ commit }) {
commit('increment');
},
},
modules: {},
});
```
```vue
<!-- 组件中使用 -->
<script>
export default {
computed: {
count() {
return this.$store.state.count;
},
},
methods: {
increment() {
this.$store.dispatch('increment');
},
},
};
</script>
```
---
###
扫一扫
2952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
