Vue的使用

<div id="app">
    <hs1 :msg = 'name' @backd="getson "></hs1>
    <div @click = 'change'>change</div>
    <component :is="name2"></component>
</div>
<script> //组件生命周期传值的实例
 let mb = Vue.extend({
     props :['msg'],
     template:'<h1 @click="back">{{msg}}</h1>',
     beforeCreate(){
         console.log(this);
     },
     methods:{
         back(){
             this.$emit('backd',this._props.msg
             )
             console.log(this.$parent.name);
         }
     }
 })
    Vue.component('hs2',{
        data:function () {
            return {
                name3:'hs1'
            }
        },
        template:'<h2></h2>',
    })
let app = new Vue({
    el:'#app',
    data:{
        name:'123',
        name1:'sondata',
        name2:'hs1'
    },
    methods:{
        change(){
            this.name = '321',
            this.name2 = 'hs2'
        },
        getson(data){
            console.log(data);
        }
    },
    components:{
        hs1:mb
    }
})
</script>