<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test">
<my :foo.sync='msg'></my>
<!--@update:foo='val=>msg=val'-->
{{msg}}
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
Vue.component('my', {
template: '<button @click="change(\'a\')">組件{{foo}}</button>',
props: ['foo'],
methods: {
change: function(newValue) {
console.log(newValue)
this.$emit('update:foo', newValue); //調用update鉤子函數更新foo屬性，並傳入新值，val=>msg=val是ES6箭頭寫法，function(val){msg=val;}
//使用:foo.sync='msg'這種寫法會自動擴展爲 @update:foo='val=>msg=>val'【版本要在2.3.0+】，否則需要手動寫
}
}
});
var vm = new Vue({
el: '#test',
data: {
msg: '思維'
},
methods: {
go: function() {
console.log('go');
}
}
})
</script>
</body>