1.父组件——子组件

想象一下，父子组件传值，就类似于父亲给儿子东西，父亲给儿子的东西要有名字吧，名字就是属性，父亲给儿子东西，儿子要用手接过来，那手就相当于子组件里的props。

 用个例子来更直观的分析一下。首先定义一个父组件和子组件。

 然后用下面固定格式  import 子组件名称 from ’子组件路径‘，再在components中写入子组件的名称完成注册，这样就可以把子组件引用到父组件。同时要把子组件的名称标签放在视图中，传值会用到，例如我这里子组件就叫son，所以要在父组件视图中写上标签<son></son>，子组件的操作即使props接收，再用插值语法 {{}} 显示在视图上。

import son from '@/components/son.vue'

运行就是这样的：

 然后就齐活了，可以开始父子通信，也就是”父亲给儿子东西“，例如父组件给子组件传递一个金额。传递值要在data中定义。

父组件：

<son v-bind:lifeMoney='lifeMoney'></son>
//其中v-bind可以简写为：

子组件：

这种写法是一个数组的形式，这种不能辨别传递的值类型，不推荐使用。

第二种：

 

 

 这种写法是一个对象的形式，type判断类型，default是默认值的意思，required是必须的意思，这里不限制你写几个。

运行：

当父亲想给儿子一个大东西，这个时候应该怎么做？当然还是一样用上面的格式来完成接收。

 例如父组件给子组件传递一个对象形式的值。

代码：

父组件

子组件：因为传递的是一个对象，所以type的属性值应该是一个Object，默认值default是一个{}，不写default的值也不会有影响。

结果：

 想要拿到传过来的对象中的某个值   {{sonuserInfo.sonname}}

2.子组件——父组件

 和父穿子几乎一样。就是把子组件中的数据传输给父组件。ok，话不多说，我们开始，看码！！

首先在子组件的data中定义需要传的键值对，money：20这就是键值对，money是键，20是值。

这里我在button中绑定了一个点击事件。

 

然后再methods中定义点击事件sendNum。

当我们点击button按钮时就会执行sedNum中的代码，this.$emit('让父组件定义的事件名字’，‘传递的值’）

this.$emit()这是固定写法。

methods:{sendNum(){this.$emit('noMoney',this.money)},},

然后就可以父组件定义怎么接收。和父传子不一样的是v-bind变成了v-on，@就是v-on的缩写。

 

再在methods中定义传过来的值，proms是一个参数，随便定义，不是关键字就行。

 

 结果：

 

总结：父子组件通信很简单，重在理解。喜欢的点赞关注，下一期讲路由传参和本地存储