今天小编给大家分享一下Vue中常见的传参方式有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

父子组件之间传参

父子组件之间最常用的组件传参方式就是：父传子使用

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>

值得注意的是，如果上级组件传的数据是响应式的，那么接收到的数据就是响应式的，反之亦然。