vue的sync修饰符

vue 中父子组件通信的时候，我们可能会看到 .snyc 的代码，它实质上是一个语法糖，不使用它我们也有解决的方案，使用它的话，可以使我们的代码更加简洁而已。

首先，我们实现一个功能，在父组件中定义一个变量来控制子组件的显示，同时子组件也可以来修改父组件中的变量
如图

这其实就是一个父子组件间的通信，父组件通过 props 传给子组件，子组件要修改父组件的数据，就要通过 this.$emit来修改
如下面的代码：
父组件

<template><div class="father-wrapper">我是父组件<button type="button" @click="isshow=!isshow">点我显示子组件</button><br/><br/><Son :isshow="isshow" @mychange="fatherchangeisshow"></Son></div>
</template><script>
import Son from "./Son"
export default {data(){return {isshow:false}},name: "Father",components:{Son},methods:{fatherchangeisshow(val){this.isshow = val;}}
}
</script><style scoped lang="less">
.father-wrapper{background:#1989fa;
}
</style>

子组件的代码

<template><div class="son-wrapper" v-if="isshow">我是子组件<button type="button" @click="hiddenson"> 点我隐藏子组件 </button></div>
</template><script>
export default {name: "Son",props:["isshow"],methods:{hiddenson(){this.$emit("mychange",false)}}
}
</script><style scoped lang="less">
.son-wrapper{width:300px;height:200px;background:#ff6034;
}
</style>

以上就是我们不使用.sync 的语法糖来做到的功能

使用 .sync 修饰符
此时，子组件的方法

hiddenson(){this.$emit("update:isshow",false)}

必须是这样写的，意思就是触发父组件的 update更新，修改 isshow 的值写法就是 update:isshow

子组件的方法修改子之后，父组件就可以使用 .sync了


<Son :isshow.sync="isshow"></Son>

上下对比一下，只是代码上的简化，其它的没有什么特殊。

vue的sync修饰符相关推荐

vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...
使用vue的sync修饰符进行子父组件的数据绑定
官方文档父组件代码 <template><div><input type="button" value="我是父组件的按钮" @ ...
关于vue中sync修饰符的用法
.sync是在vue2.3.1+版本开始使用,在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且 ...
Vue组件通信以及.sync修饰符的使用
文章目录前言一.Vue的组件通信方式 1.1 props/$emit 1.2 Vuex 二.Vue的.sync修饰符 2.1 父组件向子组件传递数据 2.2 子组件使用props接收父组件的数据 ...
Vue v-model 指令详解以及sync修饰符的使用场景（结合父子组件通信案例）
参考Vue官方文档一.需求如下: 二.代码如下三.分步解析: 父组件给子组件传值: 子组件给父组件传值: 四.sync修饰符的使用 vue.js官方文档如果已经使用了v-model双向绑定了一个 ...
vue子组件通过.sync修饰符修改props属性
在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten w ...
vue中的.sync修饰符
文章目录引申 @update:自定义的属性名 .sync修饰符引申 vue中的数据传递一般是单向数据流,即父组件数据通过props传递给子组件.但是子组件可以通过自定义事件间接修改父组件中的数据, ...
vue组件双向绑定.sync修饰符的一个坑
我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要 ...

vue的sync修饰符

vue的sync修饰符相关推荐

最新文章

热门文章