<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>