发布时间:2023-11-23 13:30
vue中我们经常会用v-bind(缩写为:)给子组件传入参数。
或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态。
//父组件给子组件传入一个函数age = res\"> //子组件通过调用这个函数来实现修改父组件的状态。 mounted () { console.log(this.$emit(\'setAge\',1234567)); }
这时子组件触发了父组件的修改函数使父组件的age修改成了1234567
这种情况比较常见切写法比较复杂。于是我们引出今天的主角 .sync
这时我们可以直接这样写
//父组件将age传给子组件并使用.sync修饰符。//子组件触发事件 mounted () { console.log(this.$emit(\'update:age\',1234567)); }
这里注意我们的事件名称被换成了update:age
update
:是被固定的也就是vue为我们约定好的名称部分age是我们要修改的状态的名称,是我们手动配置的,与传入的状态名字对应起来
这样就完成了,是不是感觉简单了很多。
注意事项:
这里我们必须在事件执行名称前加上update:的前缀才能正确触发事件。
最近项目中需要在父子组件中实现数据双向传递的功能。
在vue中我们知道props传递的属性只能实现数据的单向流动,如果我们要实现逆向传递的功能一般通过this.$emit()来触发方法来实现,使用.sync修饰符只需要通过this.$emit()来触发属性就能实现。
// 父组件使用 .sync 传递 :page.sync=\"searchForm.page\" // 子组件使用 \'update:\' 触发 this.$emit(\'update:page\', data)
注意:在uniapp项目中的某些情况下不能正常使用。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。