vue中的.sync修饰符用法及原理详解

Posted pwindy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的.sync修饰符用法及原理详解相关的知识,希望对你有一定的参考价值。

vue中我们经常会用v-bind(缩写为:)给子组件传入参数。
或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态。
例如:

//父组件给子组件传入一个函数
 <MyFooter :age="age" @setAge="(res)=> age = res">
 </MyFooter>
 //子组件通过调用这个函数来实现修改父组件的状态。
 mounted () {
      console.log(this.$emit(\'setAge\',1234567));
 }

这时子组件触发了父组件的修改函数使父组件的age修改成了1234567

这种情况比较常见切写法比较复杂。于是我们引出今天的主角 .sync

这时我们可以直接这样写

//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
 mounted () {
    console.log(this.$emit(\'update:age\',1234567));
 }

这里注意我们的事件名称被换成了update:age
update:是被固定的也就是vue为我们约定好的名称部分
age是我们要修改的状态的名称,是我们手动配置的,与传入的状态名字对应起来

这样就完成了,是不是感觉简单了很多。

注意事项:
这里我们必须在事件执行名称前加上update:的前缀才能正确触发事件。

 

参考---https://blog.csdn.net/liushijun_/article/details/92426854?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control

以上是关于vue中的.sync修饰符用法及原理详解的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0修饰符sync用法

父子组件传参 关于 .sync修饰符等用法

Vue 中的 .sync 修饰符有啥用

浅析Vue中的 .sync 修饰符

[Vue].sync 修饰符

前端vue中的v-model与.sync修饰符的区别