1. The parent component can use props to pass data to the child component. Child components can use $emit to trigger custom events for parent components. Parent/child communication, using props to pass values

 Vue.component('Child',{template: '<div> child component <inputtype="text" v-model = 'childData'/>
     </div>
     `,
     props:['childData'}) //2. Use props in the child component to receive data from the parent component After binding, you can use Vue.com Ponent ('Parent', {data() {return{
             msg:"I'm the parent component's data."}}, template: '<div> Parent <Child :childData='msg'></Child>
     </div>`
 })       

var App ={
    template:'<div><Parent /></div>'
}
var vm = new Vue({
    el:'#app'.data() {return{

        }
    },

    components:{
        App
    },

    template:'<App />'
})
Copy the code

Child parent communication

 Vue.component('Child', {template:'
      

        child component 
        
      
'.props: ['childData']})//1. Bind custom attributes to the parent component first
        //2. In the child component, use props to receive data passed by the parent component
        //3. After binding, it can be used arbitrarily in child components
 Vue.component('Parent',{
     data(){
         return{
             msg:"I'm the parent component's data."}},template:'
      

        Parent component 
        // here bind event 
      
'
     methods:{
        childHandler(){
            
        }
     }
    
 })       

var App ={
    template:'<div><Parent /></div>'
}
var vm = new Vue({
    el:'#app',
    data(){
        return{}},components:{
        App
    },

    template:'<App />'
})
Copy the code