看了很多vue组件间传参的帖子，发现很多不完整，今天闲来无事总结一下vue组件间传值，此文涉及到：父传子，子传父，爷传孙，孙传爷的组件间传值，写的比较详细，同学们也别嫌我啰嗦，此文应该达到了保姆级别，看不明白你来打我。
本次用到的三个组件分别命名为：Father，Son，GrandSon。

准备工作

首先看下三个组件的代码：

1.父组件

<template><divclass="father"><h1>父组件</h1><Son></Son></div></template>

2.子组件

<template><divclass="son"><h1>子组件</h1><GrandSon></GrandSon></div></template>

3.孙组件

<template><divclass="grandson"><h1>孙组件</h1></div></template>

为方便区分这里简单写了一下样式，渲染效果如图：

组件间传值

1.父传子

首先将父组件的中toSon的值在父组件内渲染。

<template><divclass="father"><h1>父组件</h1><h1>{{toSon}}</h1><Son></Son></div></template><script>import Sonfrom'./Son.vue'exportdefault{name:"Father",components:{ Son},data(){return{toSon:"这是父组件传给子组件的值！~"}}}</script>

注意：这里还没有进行传参

众所周知：父传子是使用自定义属性传参，使用props接收数据。
我们在父组件中使用的子组件处定义自定义属性:son。

<Son:son="toSon"></Son>

然后我们在子组件中接收数据，接收使用的son一定和前面的自定义属性:son对应。

props:{son:String},

也可以这样写：

props:["son"],

第一种写法可以指定接收的数据类型或者默认值，第二种写法比较便捷，可以按数组的形式直接加逗号往后排。
然后我们在子组件中使用接收的数据。

<template><divclass="son"><h1>子组件</h1><h1>{{son}}</h1><GrandSon></GrandSon></div></template>

然后父传子就完成了，如图所示：

2.子传父

首先将需要传给父组件的子组件的值在子组件内部渲染出来：

<template><divclass="son"><h1>子组件</h1><h1>{{toFather}}</h1><GrandSon></GrandSon></div></template><script>import GrandSonfrom'./GrandSon.vue'exportdefault{name:"Son",components:{ GrandSon},data(){return{toFather:"这是子组件传给父组件的值！~"}}}</script>

注意：这里还没有传参

子传父靠的是自定义事件，接收数据使用的是$emit，
这里我们在h1上加一个点击事件，调用sendToFather的方法，后期用来触发我们的自定义事件。

<template><divclass="son"><h1>子组件</h1><h1@click="sendToFather">{{toFather}}</h1><GrandSon></GrandSon></div></template>

然后在methods里处理此方法：

methods:{sendToFather(){this.$emit("father",this.toFather)}}

father表示我们触发点击事件调用函数sendToFather后，会触发自定义事件father，this.toFather表示子组件中要传给父组件的值。
在子组件处理完毕后我们进入父组件，需要在父组件调用子组件的位置添加自定义事件father，然后函数getFromSon就可以接收传来的数据，为了更直观化，我们先放一个坑valueOfSon用来接收数据，父组件代码如下：

<template><divclass="father"><h1>父组件</h1><h1>{{valueOfSon}}</h1><Son@father="getFromSon"></Son></div></template><script>import Sonfrom'./Son.vue'exportdefault{name:"Father",components:{ Son},data(){return{valueOfSon:"子组件接收数据的坑~"}},methods:{getFromSon(val){this.valueOfSon=val}}}</script>

未传值时，页面如图：

然后我们点击子组件中h1：这是子组件传给父组件的值！~，触发sendToFather函数，然后触发自定义事件father，将toFather的值传走，父组件中的father事件触发，调用getFromSon函数，将接收的值传给valueOfSon，我们就会发现留的坑数据改变为这是子组件传给父组件的值！~，传值成功。

3.爷传孙

首先说明：既然你学会了父传子，那么爷传孙自然不是难事，你可以先父传子，再子传孙，一步一步传，这里不再赘述。
这里用到的方法是$attrs传参，比起上面的更简洁一些，首先我们还是来一个初始状态，先将父组件的参数在父组件自身展示一下：

<template><divclass="father"><h1>父组件</h1><h1>{{toGrandSon}}</h1><Son></Son></div></template><script>import Sonfrom'./Son.vue'exportdefault{name:"Father",components:{ Son},data(){return{toGrandSon:"父组件传给孙组件的值！~"}},}</script>

注意：现在还未传参

首先我们需要先在父组件引用的子组件上使用自定义属性，将值先传给子组件，这里我们定义自定义属性:grandson。

<template><divclass="father"><h1>父组件</h1><h1>{{toGrandSon}}</h1><Son:grandson="toGrandSon"></Son></div></template>

然后重点来了：我们此时不需要使用props在子组件接收数据，而是直接在子组件引用的孙组件上面绑定v-bind="$attrs"，在这里此段代码就像导管一样，直接将数据传给了孙组件。

<template><divclass="son"><h1>子组件</h1><GrandSonv-bind="$attrs"></GrandSon></div></template>

那么如果说它将数据导给了孙组件，那么我们此时就可以在孙组件内部使用props接收数据，然后我们将接收到的数据展示出来。

<template><divclass="grandson"><h1>孙组件</h1><h1>{{ grandson }}</h1>s</div></template><script>exportdefault{name:"GrandSon",props:{grandson:String}}</script>

接收成功，效果如图：

4.孙传爷

与上同理：既然你学会了子传父，那么孙传爷也不是难事，你可以先子传父，再父传爷，一步一步传，这里不再赘述。
这里用到的方法是$listeners传参，比起上面的更简洁一些，首先我们还是来一个初始状态，先将孙组件的参数在孙组件自身展示一下：

<template><divclass="grandson"><h1>孙组件</h1><h1>{{ toFather }}</h1></div></template><script>exportdefault{name:"GrandSon",data(){return{toFather:"孙组件传给父组件的值!~"}}}</script>

这里给h1："孙组件传给父组件的值！~"添加一个点击事件来触发sendToFather函数来传参：

<template><divclass="grandson"><h1>孙组件</h1><h1@click="sendToFather">{{ toFather }}</h1></div></template>

然后在methods中处理sendToFather函数：

methods:{sendToFather(){this.$emit("father",this.toFather)}}

这里触发的是自定义事件father，后面定义，传走的值是toFather："孙组件传给父组件的值!~"
然后重点来了：我们此时不需要使用自定义事件"father"在子组件接收数据，而是直接在子组件引用的孙组件上面绑定v-on="$listeners"，在这里此段代码就像导管一样，直接将数据传给了父组件。

<template><divclass="son"><h1>子组件</h1><GrandSonv-on="$listeners"></GrandSon></div></template>

子组件部分处理完毕，再来看父组件，这里先来个坑用来接收数据，然后定义之前提到的自定义事件father，使其调用getFromGrandSon函数，然后在函数getFromGrandSon中处理数据，父组件代码如下：

<template><divclass="father"><h1>父组件</h1><h1>{{ valueOfGrandSon }}</h1><Son@father="getFromGrandSon"></Son></div></template><script>import Sonfrom'./Son.vue'exportdefault{name:"Father",components:{ Son},data(){return{valueOfGrandSon:"接收孙组件传参的坑~"}},methods:{getFromGrandSon(val){this.valueOfGrandSon=val}}}</script>

未传参时，如图所示：

此时点击子组件中的h1文字触发点击事件，执行sendToFather函数，然后触发自定义事件father，在子组件中$listeners起到导管作用，将事件传给父组件，然后父组件中的father事件被触发，执行getFromGrandSon函数，将传来的值赋给valueOfGrandSon。
如图所示：

OK！~，大功告成，到这里父传子，子传父，爷传孙，孙传爷就结束了，下面进行一些小拓展，已经理解的同学可以跳过。

拓展

• 只是自己的一点见解，如有错误欢迎指正。

1.自定义属性

• 在vue中我们经常用到一些动态属性，如:class，:id，:src，:key等等，
  这些属性有一个共同的特性那就是：他们都是系统规定好的，有特定作用的，比如:class后面跟值，可以动态绑定该元素的class。
  此类属性，我统称为：系统自带的属性。
• 而有一些属性是我们自己来写的，如上文中的:son和:grandson，这些属性只有我们自己知道他们是用来干嘛的，你甚至可以写:abc，:qwerdf来自定义这些属性。
  此类属性，我统称为：自定义属性。
• 需要强调的是，使用父传子或者爷传孙的时候，一定要使用自定义属性，如果你使用了系统自带的属性来传参是万万行不通的。

2.自定义事件

• 在vue中我们也经常用到一些事件，如@click，@dbclick，@keyup，@keydowm等等，
  这些事件有一个共同的特性那就是：他们都是系统规定好的，有特定作用的，比如@click，就规定你点击某个区域来触发后面执行的函数。
  此类事件，我统称为：系统自带的事件。
• 而有一些事件是我们自己来写的，如上文中的@father，这些事件只有我们自己知道他什么时候被触发，上文中触发机制都写在了点击事件里，你也可以有更多的选择，你甚至可以写@abc，@qwerdf来自定义这些事件。
  此类事件，我统称为：自定义事件。
• 需要强调的是，使用子传父或者孙传爷的时候，一定要使用自定义事件，如果你使用了系统自带的事件来传参也是万万行不通的。

3.$attrs

• $attrs是在vue的2.40版本新增的。
• 包含了父作用域中不作为prop被识别 (且获取) 的特性绑定 (class 和style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。
• 简单讲就是包含了所以父组件在子组件上设置的属性（除了prop传递的属性、class 和style ）。

4.$listeners

• $listeners是在vue的2.40版本新增的。
• 包含了父作用域中的 (不含 .native 修饰器的)v-on事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
• 简单点讲它是一个对象，里面包含了作用在这个组件上所有的监听器（监听事件），可以通过v-on="$listeners"将事件监听指向这个组件内的子元素（包括内部的子组件）。

5. inheritAttrs

• inheritAttrs是在vue的2.40版本新增的。
• 类型： boolean
• 默认值：true
• 如果父组件给子组件传递数据，子组件不使用props接收，那么这些数据将作为子组件的HTML元素的特性，这些特性绑定在组件的HTML根元素上。
• 如果不希望本组件的根元素继承父组件的attribute，同时父组件传过来的属性（没有被子组件的props接收的属性），也不希望显示在子组件的dom元素上可以使用inheritAttrs: false，但是在子组件里可以通过$attrs获取到没有使用的注册属性,inheritAttrs: false不会影响 style 和class 的绑定。

如：我在父组件中绑定自定义属性:abc，接收数据msg:"666"

<Son:abc="msg"></Son>

data(){return{msg:"666"}}

在子组件中不适用props接收，我们就会看到这样的情况：自定义属性被渲染在了子组件的div上。

<divclass="son"abc="666"><h1>子组件</h1></div>

而如果我们添加了inheritAttrs: false,如下：

exportdefault{name:"Son",inheritAttrs:false,components:{ GrandSon},}

则会渲染成以下，自定义的属性消失了。

<divclass="son"><h1>子组件</h1></div>

注意：对inheritAttrs操作不影响我们对$attrs的使用。

结语

文章到这里就结束了，如果你在这里学到了一些东西，希望能给我一个点赞，评论和收藏，十分感谢你的支持，博客之路我会本着认真的态度一直写下去。加油 ♪(･ω･)ﾉ