vue中 .sync 修饰符个人理解

vue中.sync修饰符有什么用

.sync 修饰符其实就是一个语法糖

vue中：子组件不能修改props 外部数据
vue中： $emit 可以触发事件并传参
vue中： $event可以获取 $emit 的参数

好，明白这些之后场景实现
父组件 parent 有自己的data状态 money 100
父组件中有子组件 child 想把data中的状态给子组件
代码实现

<child :money="money"></child>// 子组件中有一个button 按钮 每次点击之后 父组件中的data 状态中 money 就要－10 块钱 怎么实现？？？？？？

<child :money="money" @handleClick="handleClick"></child>
// 子组件中button 按钮
<button @click="handleClick1"></button>
methods:{handleClick1(){this.$emit("handleClick",money - 10)}
}
// 之后 父组件 再去定义 handleClick方法去接受
// 这种最基本的父子传值方法是不是挺复杂的

下面就是上面代码的优化结果

<child :money="money" ></child>
// 子组件中button 按钮点击事件
<button @click="$emit('updata:money', money - 10)"></button>
// 父组件中
<child :money="money" v-on:updata:money="money = $event"></child>

可以看到上面的方法都是通过监听事件去通知父组件去修改子组件不能直接修改
接下来就是 .sync修饰符的作用

<child :money.sync="money"></child>
// 相当于 <child :money="money" v-on:updata:money="money = $event "></child>// 当然子组件还是要有事件去触发
<button @click="handleClick"></button>
methods:{handleClick(){this.$emit("updata:money",money-10)}
}

大概就是这么多，欢迎补充

vue中 .sync 修饰符个人理解相关推荐

vue中.sync修饰符与自定义组件的v-model的使用
.sync修饰符有时我们需要父组件向子组件传值,并且子组件要修改父组件中的值是,我们一般会这样写 //父组件 <template>//子组件修改值父组件注册自定义事件传过来的参数通过 ...
关于vue中sync修饰符的用法
.sync是在vue2.3.1+版本开始使用,在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且 ...
vue的sync修饰符
vue 中父子组件通信的时候, 我们可能会看到 .snyc 的代码, 它实质上是一个语法糖, 不使用它我们也有解决的方案, 使用它的话,可以使我们的代码更加简洁而已. 首先, 我们实现一个功能, 在父 ...
详细解析vue中的修饰符
1.表单输入框input中的修饰符 .lazy:加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新.不加lazy则是在keyup就更新,如下: <input v-mode ...
026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Vue中事件修饰符与键盘事件
目录事件修饰符 prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:与当前事件一致时触发 passive:事件的默认行为立即 ...
027——VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Java中final修饰符的理解
记录一下今天复习的final修饰符,其中 final类的成员方法隐式被final修饰部分仅代表我个人理解总结如下: final有三种使用方法: 1.final修饰类 final修饰类表示这个类不能 ...
快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
阻止事件冒泡的方法前端结构 <div id="app"><div class="father-box" @click="click ...

vue中 .sync 修饰符个人理解

vue中 .sync 修饰符个人理解相关推荐

最新文章

热门文章

vue中 .sync 修饰符 个人理解

vue中 .sync 修饰符 个人理解相关推荐

最新文章

热门文章

vue中 .sync 修饰符个人理解

vue中 .sync 修饰符个人理解相关推荐