Vue 组件传值（父子组件传值）

前言

vue分为三种组件传值的方式：父传子、子传父、非父子组件传值

第一种 父组件向子组件传值

1、基本概念

• 在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息

2、举例说明

• 创建子组件页面在父组件上引入（注意：引入子组件必须要注册），引入自己刚刚组册的名称Chil（标签），通过Chil（标签）去向子组件传值，如果需要动态传值必须在属性名前动态绑定否则传过去的会是一个字符串，代码如下。

• 子组件中的props是接受父组件传过来的值 这里有两种写法第一种['你接收的名字'] 第二种是图中所写，这里面有一个default 是默认值的意思有很多种方法例如：字符串、数组、对象、等等。

第二种 子组件向父组件传值

• 针对于子组件向父组件传值需要使用$emit属性，第一个值是传到父组件的名字，的二个值是自己所要传到父组件的数据，如图所示。

• 父组件中在Chil（标签）上用@符号加上自己刚刚在子组件中定义的名字changeFatch接收值，后面跟的是一个方法，在图中val是可以 拿到从子组件中传过来的数据，自己在data中定义值去接受，如下图。