vue入门基础详解之父子通讯

<!--父-子传递-->
<parent con="你好(父传子)"></parent>

Vue.component('parent',{
    props:['con'],
    template:`
        <p @click="alert">点我传递信息</p>
    `,
    methods:{
        alert:function(){
            alert(this.con)
        }
    }
})

<!---子-父传递-->
<son @alert="test"></son>

Vue.component('son',{
    template:`<p @click="alert">这就是一个组件而已</p>`,
    data:function(){
        return{
            msg:"我是子组件的内容,子传父"
        }
    },
    methods:{
        alert:function(){
            this.$emit('alert',this.msg)
        }
    }
})

var app=new Vue({
    el:"#app",
    data:{
      data:''
    },
    methods:{
        test:function (data) {
            alert(data)
        }
    }

})