修饰符.sync的用法

Posted 2022-09-19 勇敢*牛牛

修饰符.sync的用法

单个props数据绑定用法

sync
也能完成组件间的信息传值。
sync修饰符，他也是一语法糖，动态属性和update：属性名称，事件。

很明显它的意思就是说.sync修饰符可以像v-model一样实现类似双向绑定的场景用法。组件间修改某一个值，和同一个组件中修改一个值

这几行的大概意思就是要求我们用$emit('update:xx', 参数)的形式传参，因为如果不用这种方法子组件内的props参数将无法成功修改，而是没有反应，所以Vue官方建议我们在子组件触发传递父组件事件中也同样用update:xx这种写法。

例如：

父组中有子组件传值
<child :title.sync="msg"></child>


子中试图修改这个值，实现父子值传递双向绑定。
<button @click="setTitle">点击修改父组件信息</button>
props:["title"],
methods:
    setTitle()
        this.$emit("update:title",Date.now())/*固定写法*/
    

---

用法很像v-model双向数据绑定，将子组件的属性和父组件穿过的属性关联在一起，互相影响，同时改变。可以解决这样最基础的场景：子组件属性改变后父组件传值过来的父属性也要同时改变，就可以利用修饰符.sync。

对象型props数据绑定用法