目前在学习 Vue 3,发现 v-model 是 Vue 2 到 Vue 3 的一个 breaking change,因此记录了学习过程。
breaking change 1
- 属性名任意,假设为 x
- 事件名必须为 “update:x”
// 在组件中使用 <Button :value="x" @update:value="x = $event" /> // 简写 <Button v-model:value="x" />
breaking change 2
- 新的 v-model 代替了 .sync 和以前的 v-model
- 新的 v-model 可以在同一组件上进行多个绑定
// before <Button :value.sync="x" :title.sync="y" /> // after <Button :value="x" @update:value="x = $event" :title="y" @update:title="y = $event" /> // 简写 <Button v-model:value="x" v-model:title="y" />
手写 Switch 组件通信实例
Switch 组件
<template> <button @click="toggle" :class="{checked:value}"><span></span></button> </template> <script lang="ts"> import { ref } from 'vue' export default { props:{ value:Boolean }, setup(props,context){ const toggle = ()=>{ context.emit('update:value',!props.value) } return {toggle} } } </script>
SwitchDemo组件
<template> <div> // <Switch :value="bool" @update:value="bool = $event" /> 等同于 <Switch v-model:value="bool"> </div> </template> <script lang="ts"> import { ref } from 'vue' import Switch from '../lib/Switch.vue' export default { components:{Switch}, setup(){ const bool = ref(false) return {bool} } } </script>
- Switch 组件通过 :value=”bool” 接收到 SwitchDemo 组件传来的属性
- Switch 组件使用 context.emit(‘update:value’,!props.value) 通知 SwitchDemo 组件要对外部属性进行更改
- 第一个参数是事件,第二个参数是结果。与 :value=”bool” @update:value=”bool = $event” 一一对应
- 最后通过 @update:value=”bool = $event” 把结果传给 SwitchDemo 组件
Vue 2 与 Vue 3 的区别
参考文献: