vue .sync的用法

它用来模拟实现父子组件的双向绑定。

问题

父组件中定义一个数据项，并传给子组件，子组件中可以对数据项进行修改，并同步到父组件中来。

sync解决

步骤

在普通的父传子的基础上添加.sync

<son :num.sync="numFormParent"></son>

在子组件中，正常定义props来接收数据，并补充一个特殊的事件出来以达到修改父组件中的数据的目标。

this.$emit('update:num', 新值)

这个特殊的事件名就是update:props名

代码

<div id="app"> <parent></parent> </div> <script src="./vue.js"></script> <script> Vue.component('parent', { template: `<div class="box">我是父组件,数据值是{{num}} <son :num.sync="num"></son></div>`, data() { return {num: Date.now()} } }) Vue.component('son', { template: `<div class="box"> 我是子组件{{num}} <button @click="hChange">修改num</button> </div>`, props:['num'], methods: { hChange() { this.$emit('update:num', Date.now()) } } }) var vm = new Vue({ el: '#app' }) </script>

同款代码使用v-model来实现

Vue.component('parent', { template: `<div class="box">我是父组件,数据值是{{num}} <son v-model="num"></son></div>`, data() { return {num: Date.now()} } }) Vue.component('son', { template: `<div class="box"> 我是子组件{{value}} <button @click="hChange">修改num</button> </div>`, props:['value'], methods: { hChange() { this.$emit('input', Date.now()) } } })

小结