组件通信

两个组件的关系只有在使用时才会知道关系。

一、父传子（子组件使用父组件的data中的数据）

1. 在父组件使用的子组件标签上加属性（通过v-bind绑定属性），属性的值就是父组件data中的数据

2. 在子组件中定义一个props选项来接收父组件传过来的数据

3. 接收到的Props上的所有数据都可以直接在子组件的模板上使用，也可以在子组件的选项中通过this.+数据名来使用

//父组件
 
 
         
   
let app = Vue.createApp({
        data() {
            return {
                fMsg: "父组件的数据",
            }
        },
    })
//子组件
app.component("mySon", {
        template: `
{{title}}
`,
        props: ['title'],
    })

二、子传父（在父组件中使用子组件上的数据）

1. 在父组件使用子组件的标签上，设置一个自定义事件，事件名称用来接收子组件传递过来的数据

2. 在子组件中通过emits选项来接收父组件传过来的事件类型

3. 在子组件内寻找一个合适的时机（点击按钮），触发事件的执行，在执行的过程中可以传递子组件内的参数，在子组件的事件方法中通过this.$emit（绑定在子组件身上的父组件自定义事件类型，子组件的数据）

//父组件
 

         
    
 let app =  Vue.createApp({
        data () {
            return {
                fMsg:"父组件的数据",
                zMsg:""
            }
        },
        methods: {
            fuMethod(msg){
                console.log("儿子给你数据了：",msg);
                this.zMsg = msg;
            }
        },
     })
//子组件
app.component("mySon",{
         template:`
 {{zMsg}}点我传值 
`,
         emits:["myclick"],
         data() {
            return {
                zMsg:"子组件的数据"
            }
         },
         methods: {
            ziMethod(){
                this.$emit("myclick",this.zMsg)
            }
         },
     })

三、兄弟组件传值

1、创建公共通信对象eventBus

vue2: import Vue from 'vue' export default new Vue()

2、A传给B

A：导入桥梁import eventBus from "../utils/event";

给A添加事件，在事件方法内写 eventBus.$emit('',要传递的数据) 通过$emit触发事件

B：导入桥梁import eventBus from "../utils/event";

mounted () {

eventBus.$on('eventa', (data)=>{ 通过$on监听事件

console.log('组件A传过来的',data);

})

}

四、跨组件传值

通过provide选项进行传值，通过inject来接收值(不局限于父子之间，可以跨越任意组件)

//父
  provide: {
    arr: [1,2,3,4,5],
    money: 55555,
  }
//子
inject:['money']
//孙
inject:['arr','money']

五、vue数组处理原则

谁的数据谁来改，父组件传过来的数据子组件没有权利去改变

vue中遵循单向数据流，数据的刘翔是父到子，父组件的数据变化了，props中的数据就会立刻更新。

这说明不应该在子组件中改变props的值，如果这样做了，就会在浏览器的控制台发出警告

六、props验证

Vue 组件可以更细致地声明对传入的 props 的校验要求。如果传入的值不满足类型要求，Vue 会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。

props:{'title':[String,Number]}//要求传过来的数据类型为字符串或数字类型
props:{'title':{
     type:String,Number,  //要求数据必须是字符串或者数字类型
     default:'洋芋擦擦，我爱吃洋芋擦擦'，//数据的默认值，如果没有传数据，那就会让默认值显示
     require:true,//判断是否必须携带
     validator(value){   //要求传过来的数据必须包括下面三个中的一个
    return ['松鼠桂鱼','臭豆腐','口水鸡']
} 
}}

七、emits验证

 emits:{
            'myClick':(payload)=>{
                // console.log("payload",payload);
                // payload代表你传递的参数，我们判断这个参数是否合法，不合法就警告
                if (payload) {
                    return true;
                }else{
                    console.warn("您忘记传递参数");
                    return false;

                }
            }
        },