当前位置：首页 > VUE

vue如何实现参数传递

2026-01-21 21:11:21VUE

路由参数传递

通过路由配置动态参数，在组件中通过this.$route.params获取。例如定义路由{ path: '/user/:id', component: User }，访问/user/123时可通过this.$route.params.id获取值123。

在<router-link>中传递参数：

<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>

props解耦路由参数

在路由配置中开启props: true，可将路由参数自动注入为组件props：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true }
  ]
})

组件内直接通过props接收：

export default {
  props: ['id']
}

查询参数传递

通过$route.query获取URL问号后的参数，如/user?id=123：

<router-link :to="{ path: '/user', query: { id: 123 }}">User</router-link>

组件内通过this.$route.query.id获取。

编程式导航传参

使用router.push()时传递参数：

this.$router.push({
  name: 'user',
  params: { id: 123 },
  query: { plan: 'premium' }
})

父子组件通信

父组件通过v-bind传递props：

vue如何实现参数传递

<child-component :message="parentMsg"></child-component>

子组件声明props接收：

export default {
  props: ['message']
}

子父组件通信

子组件通过$emit触发事件：

this.$emit('update', newValue)

父组件监听事件：

<child-component @update="handleUpdate"></child-component>

事件总线跨组件通信

创建事件中心：

export const eventBus = new Vue()

组件A发送事件：

vue如何实现参数传递

eventBus.$emit('eventName', data)

组件B监听事件：

eventBus.$on('eventName', (data) => {})

Vuex状态管理

适合复杂应用的状态管理，通过store共享数据：

// 存储
this.$store.commit('mutationName', payload)

// 获取
this.$store.state.moduleName.data

provide/inject

祖先组件提供数据：

export default {
  provide() {
    return {
      sharedData: this.sharedValue
    }
  }
}

后代组件注入使用：

export default {
  inject: ['sharedData']
}

$attrs/$listeners

传递未声明的props和事件：

<child-component v-bind="$attrs" v-on="$listeners"></child-component>

标签: 如何实现参数

分享给朋友：

vue如何实现拖动

Vue 实现拖动的几种方法使用 HTML5 原生拖放 API HTML5 提供了原生的拖放 API，通过 draggable 属性和相关事件实现拖动功能。 <template>…

vue如何实现单选

Vue 实现单选的方法在 Vue 中实现单选功能可以通过多种方式完成，以下是几种常见的实现方法：使用 v-model 绑定单选按钮通过 v-model 绑定到同一个变量，确保同一时间只有一个…

vue如何实现id

在 Vue 中实现 ID 绑定 Vue 提供了多种方式为元素或组件绑定唯一的 ID，可以根据具体需求选择合适的方法。方法一：使用 v-bind 绑定静态或动态 ID <template…

vue如何实现到期提醒

实现思路在Vue中实现到期提醒功能，可以通过计算日期差、定时检查和通知用户三个核心步骤完成。需要结合Vue的响应式特性和JavaScript的日期处理能力。计算日期差使用JavaScript…

Vue如何实现多级域名

Vue 实现多级域名的方法 Vue 本身是一个前端框架，多级域名的实现通常需要结合后端配置和前端路由。以下是几种常见的方法：使用路由动态匹配在 Vue Router 中可以通过动态路由参数…