2021-10-26

vue .sync的用法

1:今天复习vue时又学习到了.sync 那么？这个vue的.sync是用来干什么的的呢？
2：简单来说就是子组件直接修改父组件的值
3：一般我们在子组件要修改父组件的值，要先给子组件绑定一个自定义事件，然后通过子组件触发自定义组件来改变父组件的值如下
//父组件代码

<input type=“button”
value=“我是父组件中的按钮”
@click=“show”>
<child @upIsShow=“changeIsShow” v-show=“isShow”/>

//子组件代码

我是一个子组件，我在红色的海洋里！
<input type=“button” value=“点我隐身” @click=“upIsShow”>

//通过这个子组件的的$emit方法来修改父组件的值

但是一般情况我们只是想单纯的改改父组件的值，那么这个样子写就不够装逼。所以官网退出来一个新写法那就是 .sync 那这个究竟干了什么呢？

第一步：在子组件上用$emit(‘updata:fatherdata’，‘我是被改变的值’)

然后在子组件上接受

<child :fatherdata’.sync=“fatherdata’” v-show=“isShow”/>
{{fatherdata’}}
//这样就可以看到子组件修改父组件的值啦

//完整代码
父组件

<input type=“button”
value=“我是父组件中的按钮”
@click=“show”>

//子组件

我是一个子组件，我在红色的海洋里！