Vue组件通信及slot插槽

一、通过props和emit

子组件无法直接使用父组件的data数据，但是可以通过prop属性来获取并使用

1.父组件作用域中使用子组件时 给子组件标签上绑定要使用的父组件数据属性

2.子组件内部设置props 注册属性

props可以是数组或对象 例如 props: ['msg']

props是对象时，有4个属性，type为属性的数据类型，default为属性默认值，required是否必填,validator(){} 校验

如果props接收的是一个对象，需要注意，传递的其实是一个对象引用，并不是变成了子组件自身的对象

不要在子组件的methods、computed等中修改props接收过来的数据属性；props接收的属性值只能读取，不能直接修改

子组件中可以通过$emit()主动触发父组件的自定义事件

1.父组件作用域中使用子组件时，可以给子组件绑定父组件自定义事件 事件调用方法定义在父组件的methods中

2.子组件中通过$emit('自定义事件名', 参数)主动触发父组件的自定义事件，父组件被动触发事件调用对应方法

3.$emit()可以传参，参数中的$event就是$emit触发事件时传递的参数，并且是第一个参数，不会有多个参数，所以如果要想传多个参数，以对象的形式传递就行

组件通信原则

1.数据永远从上向下传递 通过props 数据流向永远是向下的，只能从父组件流向子组件

2.修改数据永远只能在数据源头修改

3.props传递数据不能跨越组件层级传递，只能逐级向下传递

4.自定事件的触发也不能跨越组件触发，只能逐级向上传递

二、通过v-model语法糖