The parent component in Vue transfers values to the child component

Principle: it is completed by props input attribute

1. Set props for sub components
2. Accept the value passed in by the parent component through the input property of the child component

let Child1={
    template:"#child1",
    props:{
        //Set an input property c1Msg to accept string type data
        c1msg:String,
        c1num:{
            type:Number,
            default:0
        },
        c1arr:{
            //If the attribute type is Array/object, default must be written as a function, and the default value is returned through the function return
            type:Array,
            default(){
                return ["aaa","bbb","ccc"]
            }
        }
    }
}

//The input property of the child component accepts the value passed in by the parent component
<fieldset id="app">
    <legend><h2>This is APP assembly</h2></legend>
    <Child1 :c1msg="appMsg" :c1num="appNum"></Child1>
</fieldset>

//Value of parent component
let app=new Vue({
    //el field, specifying the scope of vue
    el:'#app',
    //Data, specifying the data source of the Vue instance
    data:{
        appMsg:"hello msg",
        appNum:666,
        appArr:[111,222,333]
    },
    components:{
        Child1
    }
})

The child component in Vue transfers values to the parent component

Use custom events

1. Bind a user-defined event to the child component, and the trigger function is the function of the parent component
2. Trigger the custom time at the right time, then call the function of the parent component, and then pass the value of the child component to the parent component

//Bind custom events to subcomponents @c1_event, the trigger function is the function of the parent component of getChild1Date
<fieldset id="app">
    <legend><h2>This is APP Parent component</h2></legend>
    <p>receive child1 Incoming data{{appMsg}}</p>
    <Child1 @c1_event="getChild1Date"></Child1>
</fieldset>

 //Subcomponents
   let Child1={
        template:"#child1",
        data(){
            return {
                c1Msg:"hello child1!"
            }
        },
        //The lifecycle function is displayed after child1 is loaded
      mounted(){
          //Trigger custom event
            //this.$emit("custom event name", argument)
            this.$emit("c1_event",this.c1Msg);
        },

//Parent component
new Vue({
    el:"#app",
    data: {
        appMsg:""
    },
    components:{
        Child1
    },
    methods:{
        getChild1Date(data){
            //Accept data with data
            console.log("getChild1Date Method triggered",data)
            this.appMsg=data;
        }
    }

})

Inter component communication (brother to brother) intermediary

Middleman mode:
Find the parent-child relationship between two components communicating with each other. First, transfer the data to the child component through the child to the parent, and then transfer the data to the child component through the parent to the child

Parent child component intermodulation method

In Vue, the child component can call the method of the parent component, and the responding parent component can also call the method of the child component
Implementation principle: whether the child calls the parent or the parent calls the child, only the vue instance to which the method belongs can be called

Therefore, if you want to call the methods of other components, in essence, you need to find a way to obtain the instances of the corresponding components

In the parent component, obtain the child component instance through ref
1. Set ref attribute and assign value to sub components to ensure the uniqueness of ref value

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

2. Get ref objects of all child components through $refs in the parent component

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

In the child component, obtain the parent component instance through: r o o t or person root or root or parent

let Child2={
    template:"#child2",
    methods:{
        actionAppMethod(){
            //$parent gets the parent component in the current component, $root gets the root component in the current component tree
            console.log(this.$parent.funcApp());
        }
    }
}

Inter component communication (between brothers) message listening and message sending

Message listening and sending * * (event_bus)**
1. Message listener: the component that receives data
2. Message sender: the component that transmits data

be careful:
1. The monitored message must be correct
2. Listening must be established before sending messages

Vue suggests using a special Vue instance to perform message listening and sending operations

//Create a new public vue instance for listening and sending messages
let totalVue=new Vue();

• Create message listener

  Public vue instance. $on("listening message name", callback function)
  The second callback function will be triggered immediately after listening to the corresponding message being sent

let Child1={
    template:"#child1",
    data(){
        return{
            c1Msg:"",
        }
    },
    //Created life cycle function, which is triggered after the component instance is created
    created(){
        /*
        Create message listener
        Public vue instance. $on("listening message name", callback function)
        The second callback function will be triggered immediately after listening to the corresponding message being sent
        * */
        //It's OK for the arrow function to point to this
        totalVue.$on("sendMsg", (data)=> {
            console.log("sendMsg Message sent",data)
            this.c1Msg=data;
        })
    }
}

• send message

  Public vue instance. $emit (sent message name, carried data)

let Child2={
    template:"#child2",
    data(){
        return{
            c2Msg:"This is child2 Data",
        }
    },
    methods:{
        sendDataToChild1(){
            //send message
            totalVue.$emit("sendMsg",this.c2Msg)
        }
    }
}