vue实现传参
Vue 实现传参的方法
Vue 中传递参数有多种方式，适用于不同场景。以下是常见的传参方法：
通过 Props 传递参数
父组件通过 props 向子组件传递数据。子组件需要在 props 中声明接收的属性。
<!-- 父组件 -->
<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentMessage: 'Hello from parent'
};
},
components: { ChildComponent }
};
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
};
</script>通过自定义事件传递参数
子组件通过 $emit 触发事件，父组件监听事件并接收参数。
<!-- 子组件 -->
<template>
<button @click="sendMessage">Send</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from child');
}
}
};
</script>
<!-- 父组件 -->
<template>
<ChildComponent @message-sent="handleMessage" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
methods: {
handleMessage(msg) {
console.log(msg); // 'Hello from child'
}
},
components: { ChildComponent }
};
</script>通过路由传递参数
在 Vue Router 中，可以通过 params 或 query 传递参数。
// 通过 params 传参
this.$router.push({ name: 'user', params: { id: 1 } });
// 通过 query 传参
this.$router.push({ path: '/user', query: { id: 1 } });在目标组件中接收参数：
// 接收 params
this.$route.params.id;
// 接收 query
this.$route.query.id;通过 Vuex 状态管理传递参数
在大型应用中，可以通过 Vuex 共享状态。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
message: ''
},
mutations: {
setMessage(state, payload) {
state.message = payload;
}
}
});
// 组件中提交 mutation
this.$store.commit('setMessage', 'New message');
// 组件中获取 state
this.$store.state.message;通过 provide/inject 传递参数
跨层级组件传递数据时，可以使用 provide 和 inject。
// 父组件
export default {
provide() {
return {
sharedData: 'Shared data'
};
}
};
// 子组件
export default {
inject: ['sharedData'],
mounted() {
console.log(this.sharedData); // 'Shared data'
}
};通过 $attrs 和 $listeners 传递参数
适用于多层嵌套组件，可以透传属性和事件。
<!-- 中间组件 -->
<template>
<ChildComponent v-bind="$attrs" v-on="$listeners" />
</template>
<!-- 子组件可以直接接收父组件的属性和事件 -->注意事项
- Props 适合父子组件直接通信，遵循单向数据流原则。
- 自定义事件适合子组件向父组件传递数据。
- 路由传参适合页面间传递数据。
- Vuex 适合全局状态管理，避免过度使用导致代码复杂。
- provide/inject 适合跨层级组件通信，但会降低组件复用性。
- $attrs 和 $listeners 适合创建高阶组件或中间层组件。
