Vue 3 的 v-model

时间:2021-1-9 作者:admin

目前在学习 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 的区别

  • 新 v-model 代替之前的 v-model.sync
  • 新增 context.emit 与 this.$emit 作用相同

参考文献:

  1. Vue 官方文档
  2. 深入理解 Vue 的 .sync 修饰符
  3. v-model 的本质是语法糖
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。