效果圖：

QQ截圖20180922094416.png

QQ截圖20180922094509.png

body:

 <div id="app">
   <my-father></my-father>
</div>

js:

<script>
   //父組件
    Vue.component('my-father',{
        template:
        `
            <div>
                <h1>{{mess}}</h1>
                <my-child v-on:send='Msg'></my-child>
            </div>
        `,
        data:function(){
            return{
                mess:''
            }
        },
        methods:{
            //父組件接收子組件傳過來的值  值為txt
            Msg:function(txt){
                this.mess=txt
            }
        }
    })
    //子組件
    Vue.component('my-child',{
        template:
        `
            <button @click='sendToFather'>傳值給父元素</button>
        `,
        data:function(){
            return{
                message:'我是子組件，給父組件傳值'
            }
        },
        methods:{
            sendToFather:function(){
                //         自定義事件,傳輸?shù)臄?shù)據(jù)
                this.$emit('send',this.message)
            }
        }
    })
    
    new Vue({
        el:'#app'
    })
</script>