Vue学习笔记-5 组件通讯方式

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
父子通讯，使用props传值

 Vue.component('Child',{
     template:`
     <div>子组件
     <input type="text" v-model = 'childData'/>
     </div>
     `,
     props:['childData']
 })
        //1.先给父组件中绑定自定义的属性
        //2.在子组件中使用props接收父组件传递的数据
        //3.绑定后可以在子组件中任意使用
 Vue.component('Parent',{
     data(){
         return{
             msg:"我是父组件的数据"
         }
     },
     template:`
     <div>父组件
     <Child :childData='msg'></Child>
     </div>`
 })       

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

        }
    },

    components:{
        App
    },

    template:'<App />'
})

子父通讯

 Vue.component('Child',{
     template:`
     <div>子组件
     <input type="text" v-model = 'childData'/>
     </div>
     `,
     props:['childData']
 })
        //1.先给父组件中绑定自定义的属性
        //2.在子组件中使用props接收父组件传递的数据
        //3.绑定后可以在子组件中任意使用
 Vue.component('Parent',{
     data(){
         return{
             msg:"我是父组件的数据"
         }
     },
     template:`
     <div>父组件
     <Child :childData='msg'@childHandler=''childhandler></Child> //这里绑定事件
     </div>`
     methods:{
        childHandler(){
            
        }
     }
    
 })       

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

        }
    },

    components:{
        App
    },

    template:'<App />'
})