SOURCE

new Vue({
    el : '#demo' ,
    data: {
    	text : 'hello'
      },
      components : {
        'YButton' : {
             props : ['text'] ,
           data : () => {
                return {
                    text2 : this.text
              }
           },
           template : 
           '<div class="botton-root-dom">'+
              '<button @click="clickme">点我</button>' +
            '</div>' ,
            methods : {
                clickme () {
                    this.text2 = 'world';

                    this.$emit('update:text' , this.text2);
                    alert(this.text);
                }
            }
        }
      },
      methods: {
        
      }
})

<div id="demo">
    <y-button :text.sync='text' ></y-button>
    <p>{{ text }}</p>
</div>

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#demo {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}