<div id="app">
    <h3>{{ parentComponentName }}</h3>
    <child v-on:change-parent-component-name = "changeParentComponentName"></child>
</div>

<template id="child">
    <div>
        <button @click="clickCallback">点击我</button>
    </div>
</template>

body {
  background-color: #777;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAAU0lEQVQIHQXBwRGDIBAAwO2/AMcCDHAcPjIRxjJ8Je1kl1uqUgphsWu6w0sIG6npLpcUBql4e/wsVRKabrkNTacIYbMrwsF06rqUhsnXVKVT+Hj+Ue4rPSONk4kAAAAASUVORK5CYII=);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#app {
  text-align: center;
  border: 1px solid #ccc;
  padding: 3vh 5vw;
  border-radius: 5px;
  position: relative;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
  
  &:before {
    content: '父组件';
    position: absolute;
    left: -64px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 5px;
    color: #fff;
    background-color: rgba(0,0,0,.8);
    border-radius:3px;
  }
  &:after {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid rgba(0,0,0,.8);
    border-color: transparent transparent transparent rgba(0,0,0,.8);
  }
  
  div {
    padding: 3vh 5vw;
    border: 1px solid darken(#678, 20%);
    border-radius: 3px;
    position: relative;
    
    &:before {
    content: '子组件';
    position: absolute;
    right: -64px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 5px;
    color: #fff;
    background-color: rgba(0,0,0,.8);
    border-radius:3px;
  }
  &:after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid rgba(0,0,0,.8);
    border-color: transparent rgba(0,0,0,.8) transparent transparent;
  }
  }
}

button {
  border: none;
  background: #123456;
  color: #FFFFFF;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  display: inline-block;
  outline: none;
  min-width: 60px;
}

let parent = new Vue({
    el: '#app',
    data () {
        return {
            parentComponentName: 'W3cplus'
        }
    },
    methods: {
        changeParentComponentName: function (componentName) {
            this.parentComponentName = componentName
        }
    },
    components: {
        'child': {
            template: '#child',
            data () {
                return {
                    parentComponentName: '大漠'
                }
            },
            methods: {
                clickCallback: function () {
                    this.$emit('change-parent-component-name', this.parentComponentName)
                }
            }
        }
    }
})