组件传值

组件的关系
1、父子关系
2、非父子关系

组件传值
1、父传子
2、子传父
3、非父子

父传子：
传递：当子组件在父组件中当做标签使用的时候，给当前子组件绑定一个自定义属性，值为需要传递的数据
接收：在子组件内部通过props属性来进行接收。props接收的方式有2种一种为数组 另一种为对象

1、数组接收：props:[自定义属性]

2、对象接收：
props:{
自定义属性：{
type:
default:
required
}
}

type:限制外部数据的类型
default:默认值 当父组件没有给子组件传递值得时候用默认值
required：当前属性是必传的值

子传父
当子组件在父组件中当做标签使用的时候，给当前子组件绑定一个自定义方法。值为接收参数的函数(注意这个函数不允许加());
在子组件内部通过this.$emit来调用自定义方法，值通过函数进行传递

2、插槽作用域
在子组件的的内部通过给<slot></slot>绑定自定义属性
在父组件中给子组件标签的template标签添加一个属性
<组件>
<template v-slot：插槽名称=“props”>
<标签>{{props.自定义数组中}}</标签>
</template>
<组件>

非父子传递
1、在Vue的原型上加一个公共方法即可 (只要能让组件拥有共同的$on $emit就可以实现非父子组件传值)
a:给原型上添加一个公共的vue实例

2、添加一个observer(手动封装的事件订阅)

3、Eventbus

4、vuex