组件间通信

Vue里的父组件向子组件传值

原理：通过props输入属性完成

1.给子组件设置props
2.通过子组件的输入属性接受父组件传入的值

let Child1={
    template:"#child1",
    props:{
        //设置一个输入属性c1Msg，用于接受字符串类型的数据
        c1msg:String,
        c1num:{
            type:Number,
            default:0
        },
        c1arr:{
            //如果属性的类型是Array/object，default必须写成函数，默认值通过函数return出来
            type:Array,
            default(){
                return ["aaa","bbb","ccc"]
            }
        }
    }
}

//子组件的输入属性接受父组件传入的值
<fieldset id="app">
    <legend><h2>这是APP组件</h2></legend>
    <Child1 :c1msg="appMsg" :c1num="appNum"></Child1>
</fieldset>

//父组件的值
let app=new Vue({
    //el字段，指定的是vue的作用域
    el:'#app',
    //data数据，指定Vue实例的数据源
    data:{
        appMsg:"hello msg",
        appNum:666,
        appArr:[111,222,333]
    },
    components:{
        Child1
    }
})

Vue里 子组件向父组件传值

使用自定义事件

1.给子组件绑定自定义事件，触发函数为父组件的函数
2.在合适的时机触发自定义时间，进而调用父组件的函数，进而将子组件的值传递给父组件

//给子组件绑定自定义事件@c1_event，触发函数为getChild1Date父组件的函数
<fieldset id="app">
    <legend><h2>这是APP父组件</h2></legend>
    <p>接受到child1传来的数据{{appMsg}}</p>
    <Child1 @c1_event="getChild1Date"></Child1>
</fieldset>

 //子组件
   let Child1={
        template:"#child1",
        data(){
            return {
                c1Msg:"hello child1!"
            }
        },
        //生命周期函数 在child1加载完之后就显示
      mounted(){
          //触发自定义事件
            //this.$emit("自定义事件名",实参)
            this.$emit("c1_event",this.c1Msg);
        },

//父组件
new Vue({
    el:"#app",
    data: {
        appMsg:""
    },
    components:{
        Child1
    },
    methods:{
        getChild1Date(data){
            //用data接受数据
            console.log("getChild1Date方法触发了",data)
            this.appMsg=data;
        }
    }

})

组件间通信（兄弟之间）中间人

中间人模式：
找到相互通信的两个组件的父子间，先通过子向父，将数据传递给子组件，在通过父向子传递给子组件

父子组件互调方法

Vue里，子组件可以调用父组件的方法，响应的父组件也可以调用子组件的方法
实现原理：不管是子调用父，还是父调用子，方法只有所属的vue实例才可以调用

所以，如果想要调用其他组件的方法，本质上，需要先想办法获取对应组件的实例

在父组件里，获取子组件实例：通过ref
1.给子组件设置ref属性，并赋值，保证ref值的唯一性

<Child1 ref="c1"></Child1>
<Child2 ref="c2"></Child2>

2.在父组件里通过$refs获取所有子组件的ref对象

methods: {
    actionChild1Method(){
        console.log(this.$refs.c1);
        this.$refs.c1.funcChild1();
    },
}

在子组件里，获取父组件实例：通过$root或者$parent

let Child2={
    template:"#child2",
    methods:{
        actionAppMethod(){
            //$parent获取当前组件里的父组件 $root获取当前组件树里的根组件
            console.log(this.$parent.funcApp());
        }
    }
}

组件间通信（兄弟之间）消息监听和消息发送

消息监听和消息发送**（event_bus）**
1.消息的监听者：接收数据的组件
2.消息的发送者 ：传递数据的组件

注意：
1.监听的消息一定要正确
2.监听一定要在消息发送之前建立

Vue建议用一个专门的vue实例，来执行消息监听和发送的操作

//创建一个公共的新vue实例，用于执行消息的监听和发送
let totalVue=new Vue();

• 创建消息监听

  公共vue实例.$on(“监听的消息名称”,回调函数)
  第二个回调函数会在监听到对应消息被发送时立刻触发

let Child1={
    template:"#child1",
    data(){
        return{
            c1Msg:"",
        }
    },
    //created生命周期函数，该函数在组件实例创建完毕后触发
    created(){
        /*
        创建消息监听
        公共vue实例.$on("监听的消息名称",回调函数)
        第二个回调函数会在监听到对应消息被发送时立刻触发
        * */
        //箭头函数用this指向没问题
        totalVue.$on("sendMsg", (data)=> {
            console.log("sendMsg消息被发送",data)
            this.c1Msg=data;
        })
    }
}

• 发送消息

  公共vue实例.$emit(发送的消息名称,携带的数据)

let Child2={
    template:"#child2",
    data(){
        return{
            c2Msg:"这是child2的数据",
        }
    },
    methods:{
        sendDataToChild1(){
            //发送消息
            totalVue.$emit("sendMsg",this.c2Msg)
        }
    }
}