vue如何实现参数传递

路由参数传递

通过路由配置动态参数，在组件中通过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：

<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发送事件：

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>