vue组件间是如何进行传值的？子组件中通过`$emit`方法，传入事件名和数据，在父组件中的子组件标签上通过@符调用子组

vue组件间是如何进行传值的？

了解组件之间的关系

父子关系
A组件中，引用并使用了B组件。那么A组件就是父组件，B组件就是子组件这种父子关系和两个div嵌套是一个意思

兄弟关系(非父子关系)
这里的兄弟关系，并不是绝对的兄弟。这里的兄弟泛指没有直接关联的两个组件

既然组件有上诉关系，所以组件的数据分享分为

父传子 (将父组件的数据传递给子组件)
子传父 (将子组件的数据传递给父组件)
兄弟间传值 (没有任何关系的组件传递数据)

在父传子的时候（重点）：

1、父组件(数据发送方)
使用子组件的时候(使用标签的时候)，通过自定义属性，传递数据

//注意:如果传递的值是变量要在属性前面加:(引号)
//列如：表示传递的值是 name。真正传递的是 name="ikun"
//如果传递的是值是男这个字可以省略:(引号)
//列如：sex='男'表示传递的就是男这一个字
//属性前面可以直接省略:(引号)


 <IittleBox name="name" sex="男" :age="18"> </IittleBox>

2、子组件(数据接收方)
通过props接收数据

export default {
props:['name','sex','age']
}

如图所示：

单向数据流(重点)：

Veu的数据，要遵循单向数据流的原则

父组件传递给子组件的数据，在子组件中不能修改
父组件传递给子组件的算数据,父组件如果修改了数据，则会自动更新到子组件
注意事项：如果父组件给子组件的是一个对象，子组件修改对象的属性，是不会报错的，但也应该避免

在子传父的时候（重点）：

子组件向父组件传递数据，也涉及到数据的发送和数据的接收方
子组件向父组件传递数据,是通过事件触发的方式实现的

1、父组件(数据接收方)
在组件标签上,准备好事件(自定义事件),事件处理函数的参数就是传递过来的数据

2、子组件(数据发送方)
通过$emit方法，触发父组件准备好的事件，并传递数据

如图所示：

总结：

父传子的情况下：父组件中在要传递的子组件标签上通过键值对的形式传递属性和值(值是变量，属性名前面要加引号，是数字和多个字的话可以不加引号);在子组件中通过props属性中以对象或数组({},[])的形式接收属性名。

子传父的情况下：子组件中通过$emit方法，传入事件名和数据，在父组件中的子组件标签上通过@符调用子组件$emit传入的事件名(自定义事件)，事件处理的函数就是传递过来得数据。