Vue — 组件通信

一、父传子

　　<!-- 1.父组件：给子组件用添加属性的方式来传值 -->
    <Son :msg="msg" :arr="arr"></Son>

　　// 2.子组件：子组件通过props来接收
    props : ['msg','arr']

关于prop

1.什么是prop

（1）定义：组件上定义的一些自定义属性

（2）作用：向子组件传递数据

（3）特点：可以传任意数量、任意类型的prop

2.prop校验：组件的prop（数据类型）不能乱传，添加prop的校验要求

（1）类型校验 //String Boolean Number Object ...

（2）非空校验、默认值、自定义校验

    props: {
        msg: Number,
        arr: {
            type: Array, //数据类型校验
            requied: true,//非空校验
            default: function () {
                return [1,3,5];
            },//默认值
            validator(value){

                console.log(value)
                if(value[0]==1){

                    return true
                }else{
                    return false
                }

            }//自定义校验
        }
    },

3.prop&data、单项数据流

（1）共同点：给组件提供数据

（2）区别：

data的数据都是自己的，可以随便修改；

prop的数据是父组件传过来的，不能直接改，要遵循单向数据流(父组件的prop更新会单向的向下流动，影响子组件)

二、子传父

//子组件：子组件通过$emit 向父组件发送消息通知
<button @click="sendFather">传给父组件</button>
methods:{
        sendFather(){
            this.$emit('sonMsg',this.sonMsg)
        }
}
//父组件：在子组件标签添加消息监听 并在函数中处理
<Son @sonMsg="accept"></Son>
methods : {
    accept(params){
      console.log(params)
    }
  }

 三、非父子关系(兄弟组件)（EventBus）

//1.创建一个都能访问到的事件总线 （空的Vue实例）
import Vue from 'vue'
const Bus= new Vue()
export default Bus

//B组件发送
<button @click="send">send</button>

import Bus from '../utils/EventBus'
 methods : {
        send(){
            Bus.$emit('sendMsg','11111111188888888888888888')
        }
 }

//A组件接收
import Bus from '../utils/EventBus'
created() {
        // 2.在接收方进行监听Bus的事件（订阅消息）
        Bus.$on('sendMsg', (msg) => {
            console.log(msg)
            this.msg = msg
        })
},

//ps:可以有多个接收方 

四、非父子组件(跨层级组件) （provide&inject）

祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据，实现祖先组件向后代组件传递数据

//APP组件
 data() {
    return {
      obj: {
        name: '晴天',
        age: '1',

      }, //响应式
      color: 'pink' //非响应式
    }

  },
  provide() {
    return {
      color: this.color ,
      obj : this.obj
    }
  }

//子组件
inject:['obj']

//孙子组件
inject:['color']