Vue中几种常见的传参方式

Posted 2023-04-05 星II河

前言

Vue组件传参方也是面试最常考的内容，犹记得当初刚出来实习的时候，遇到一个需求，大概就是一个tabs下面有五个子页面，每个子页面表示订单的一种状态。当时是把五个子页面抽成了五个组件，做完后又有一个问题，就是在一个页面更改了数据状态之后，切换到另一个页面的时候要通知这个页面更新数据，当时是完全没有思路，找带我的大哥教我，讲了半天还是没有懂，最后还是大哥手把手的教我写完的，那时候觉得大哥好厉害，666，现在一想起来，不就是最简单的兄弟组件之前参数传递吗？😓今天就来回忆一下工作中常用的几种组件传参的方式。

父子组件之间传参

父子组件之间最常用的组件传参方式就是：父传子使用v-bind:attr传递，子组件使用props接收，子传父使用方法传递，父组件在方法参数中获取，即$emit['method':val],父组件使用@method接收。

// 父传子
// 父组件
<template>
    <div>
        父组件
        <br/>
        <child  :name="name"  @getChild="getChild"/>
    </div>
</template>

<script>
  export default 
     data()
       return 
         name:'father'
       
     ,
     methods:
       getChild(val)
         console.log(val)  // 123
       
     
  
</script>

// 子组件

<template>
    <div>
        子组件
        <br/>
        name
        
        <button @click="toParent">传到父组件</button>
    </div>
</template>

<script>
  export default 
     props:
       name: type: String, default:''
     ,
     data()
       return 
       
     ,
     methods:
       toParent()
         this.$emit('getChild',123)
       
     
  
</script>

除此之外，vue还提供了一种语法糖，可以简单的实现父子组件间数据的双向绑定。

// 父组件
<template>
    <div>
        父组件
        <br/>
        <child  :name.sync="name" />
    </div>
</template>

<script>
  export default 
     data()
       return 
         name:'father'
       
     
  
</script>

// 子组件

<template>
    <div>
        子组件
        <br/>
        name
        <button @click="toParent">传到父组件</button>
    </div>
</template>



<script>
  export default 
     props:
       name: type: String, default:''
     ,
     data()
       return 
       
     ,
     methods:
       toParent()
         this.$emit('update:name',123)
       
     
  
</script>

父组件还可以使用$refs直接调用子组件的所有属性和方法，但是并不推荐使用这种方法。

<child ref="child"></child>
// 父组件可以使用$refs.child.xxx直接调用子组件的属性和方法

兄弟组件之间传参

兄弟组件之间传参可以使用vuex、localStorage、sessionStorage、EventBus事件中转，前面三种方法无非就是找第三方把数据存起来，需要的时候再获取就行，这里主要讲一下事件中转的用法。

// 1.首先在app.vue种定义一个中转站，再挂载到全局对象上面。
// App.vue
Vue.prototype.$eventBus = new Vue()

// 2.在需要传递的页面使用$emit(eventName,params)发射参数
this.$eventBus.$emit(eventName,params)

// 3.在需要接收参数的页面使用$on(eventName,(params) => ) 接收参数
this.$eventBus.$on(eventName,(params) => )

这种方法其实还可以用于跨层级传参，以前我很抵触这种用法，后来用过一次之后觉得真香啊。还有需要注意的一点就是在组件销毁的时候记得移除监听的事件绑定，使用$eventBus.$off(eventName)实现事件监听移除。

provide/inject传参

provide/inject可以用于跨层级传参，不过只能从上到下：

// 在上级组件中使用provide修饰的数据，在下级组件中可以使用inject接收，类似于props
 // 上级组件
 <script>
   export default 
     data()
      return 
        age: 12
      
     ,
     provide()
       return 
         name: 111,
         age: this.age
       
     
   
   
   // 下级组件
    <script>
   export default 
     data()
      return 
      
     ,
     inject:['name'，'age'] // 使用时当data数据使用就行
   
 </script>

值得注意的是，如果上级组件传的数据是响应式的，那么接收到的数据就是响应式的，反之亦然。
以上就是我在工作中常用的组件传参方式，喜欢的话就点个赞再走吧。

Vue-router的传参方式和router使用技巧

vue传参方法一

1，路由配置

   {
     path: ‘/describe/:id‘,
     name: ‘Describe‘,
     component: Describe
   }

2，使用方法

//   直接调用$router.push 实现携带参数的跳转
 this.$router.push({
//  这个id是一个变量,随便是什么值都可以
    path: /describe/${id}`,
 })

 3，获取方法（在describe页面）

$route.params.id

使用以上方法可以拿到上个页面传过来的id值

vue传参方法二

 1，路由配置

  {
     path: ‘/describe‘,
     name: ‘Describe‘,
     component: Describe
   }

（这个地方默认配置就可以了，不用做任何的处理）

2，使用方法

    this.$router.push({
       name: ‘Describe‘,
       params: {
         id: id
      }
   })

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

 3，获取方法（在describe页面）

$route.params.id

也用params获取就可以了；

vue传参方法三

 1，路由配置

 {
     path: ‘/describe‘,
     name: ‘Describe‘,
     component: Describe
 }

（默认配置）

2，使用方法

   this.$router.push({
     path: ‘/describe‘,
     query: {
       id: id
     }
   })

（params换成了query）

 3，获取方法（在describe页面）

$route.query.id

（这个地方用query还获取id，和前面用的params获取的区别在于，用query获取的id值会在url中有显示，可以看到你传过来的值）

props传值方法

父组件

（table-data这个地方可以随便取名字，不是特定的值）

<div class="content">
//这个是一个普通组件，其中tabelData可以是变量，也可以是常量，和pageInfo一样样，这里打算传递两个值过去，其实也可以用对象的方式传过去都是可以的。
    <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</div>

子组件

props: [‘tableData‘, ‘pageInfo‘],
data() {
    return {
        tData: this.tableData,
        page: this.pageInfo
    }
}

prop是单向绑定的，不应该在子组件内部改变prop。不过这里的props传过来的值会随之父组件的值的改变而改变，是动态改变的。

$route使用小技巧

1，$route.path

• 类型: string

  字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

2，$route.params

• 类型: Object

　　一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

3，$route.query

• 类型: Object

  一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

4，$route.hash

• 类型: string

  当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

5，$route.fullPath

• 类型: string

  完成解析后的 URL，包含查询参数和 hash 的完整路径。