sync是语法糖 :title.sync 有两步 1 :title="title" 2 @update:title="val => title = val"
:title.sync="title"会被扩展为@update:title="val => title = val" :title="title"
方便子组件修改父组件的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>
<div>
<text-document @update:title="val => title = val" :title="title" />
</div>
<div>
<text-document :title.sync="title" />
</div>
<div>
{{title}}
</div>
</div>
</div>
<script src="./script/vue.js"></script>
<script>
Vue.component('text-document', {
props: ['title'],
template: ` <div>
<div @click="setNewTitle">
{{title}}
</div>
</div>`,
methods: {
setNewTitle: function () {
//手动进行更新父组件中的值
console.log(121)
this.$emit('update:title', '这步操作修改标题实现prop双向绑定')
}
}
})
var vm = new Vue({
el: '#app',
data: {
title: '对prop进行“双向绑定”'
},
});
</script>
</body>
</html>
