vue 组件之间传值 父转子，子传父，同级别之间的传参，跨级别传参

写这篇文章之前，我对vue组件之间的传值，还是只知道一些基础的传值方式。虽然工作中勉强能够应对，但是想要行云流水感觉还是心有余而力不足，所以在此，我想总结一下vue组件之间的一些传值方式供大家参考，同时也是给自己加深下记忆。

vue的传值方式大概分为以下几种

1. 父传子
2. 子传父
3. 兄弟间
4. 隔代传参

首先我们介绍下第一种 父传子：

父传子方式1：最常用的就是props传值，这种方式大家都很熟悉，但是也有点小坑，比如父组件没有传递某一个值过来而子组件缺定义了这个值，这时候我们就需要设置默认值的方式解决该问题的出现，具体代码如下

//这是父组件 就叫father.vue







//这是一个子组件   就叫child.vue

如果items在父组件中没有传值，并且在child.vue里面接收且想要的是字符转类型的我们可以这么操作

//这是父组件 就叫father.vue







//这是一个子组件   就叫child.vue




//以上是传字符串的方式，其他类型类似，但是数组除外，如果是数组就要采用以下形式

array：{
    type: Array,
    default: function () { //这里也可以使用箭头函数的方式  和以上第二种形式类似
        return []
    }
}

 

父传子方式2：$refs 

$refs 利用ref标识组件，通过事件传参把数据传给子组件，数据相互独立

父传子方式3：$attrs

$attrs通过绑定属性，来实现传值；可以实现，父传子，孙组件；$attrs是vue2.4版本提出的方法

父传子方式4：$children[0]

  以上是父传子的四种方式，可以根据需要自己选择，$attrs既可以实现父传子，又可以实现父传孙实现隔代传

接下来我们介绍下第二种 子传父：

  常用的就是$emit，具体代码如下

以上是子传父，如果大家还有其他的方式，欢迎以下留言，我再补上去，感谢

继续我们介绍下第三种 兄弟间：（这个有点意思了）

兄弟间传值需要创建一个新的js文件，内容不多就是如下两行代码，但是百度的时候大家可能看到有两种一个是eventVue.js一个是bus.js，其实内容是一样，只不过名字不同而已。在这里我就叫做bus.js,然后用$emi触发传参，$on去接收赋值。原理就是类似window的全局自定义事件，利用一个新的vue示例作为媒介，而不是当前vue示例(this)

import Vue from 'vue'
export default new Vue()

创建好了bus.js后，具体代码如下

//组件A





//组件B 

最后我们介绍下最后一种隔代传参

采用的是provide / inject的形式，用法和父传子的props类似，具体代码如下

在定义父组件的时候用provide方法和data一样通过return 返回，在组件里需要改变的时候用inject 用法和props一样包括设置默认值的方式.

以上是组件之间的全部传参方式，包含了父转子，子传父，同级别之间的传参，跨级别传参的方法，如有不足之处还望指出，再加修改