Vue中常见的传参方式有哪些

今天小编给大家分享一下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>

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

以上就是“Vue中常见的传参方式有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。