Vue+JSX中VDataTable的sortBy、sortDesc双向绑定实现问题

解决方案 #

你遇到的问题是只向组件传递了props值，没有监听组件抛出的更新事件，因此父组件的响应式变量无法同步子组件内部的修改，有两种实现方式可选：

写法1：语法糖写法（推荐）

如果你的项目构建工具（Vue CLI/Vite）默认配置了JSX的v-model语法支持，直接使用以下写法即可，和template语法的v-model:效果完全一致：

<VDataTable
  items={this.desserts}
  v-model:sortBy={this.sortBy}
  v-model:sortDesc={this.sortDesc}
/>

写法2：手动绑定事件

如果你的项目不支持JSX的v-model语法，手动绑定对应更新事件即可：

<VDataTable
  items={this.desserts}
  sortBy={this.sortBy}
  sortDesc={this.sortDesc}
  onUpdate:sortBy={(val) => { this.sortBy = val }}
  onUpdate:sortDesc={(val) => { this.sortDesc = val }}
/>

原理解释 #

• template语法里的.sync/v-model: 修饰符本质是「属性传值+监听对应update事件」的语法糖，你写的:sort-by.sync="sortBy"等价于:sort-by="sortBy" @update:sort-by="sortBy = $event"
• 在Vue的JSX语法中，事件绑定需要在原事件名前加on前缀，同时把kebab-case格式的事件名转为驼峰格式，因此update:sort-by对应JSX中的onUpdate:sortBy，update:sort-desc对应onUpdate:sortDesc
• 回调函数接收的参数就是子组件抛出的最新值，直接赋值给你的data中声明的变量即可完成双向同步

内容的提问来源于stack exchange，提问作者Rob