VUE3-数据绑定、自定义Hooks

v-model

vue3 里面v-model是破坏性更新，v-model 其实是一个语法糖 通过props 和 emit组合而成的 。 vue2->vue3的改变： 1、prop：value -> modelValue 2、事件：input -> update:modelValue 3、v-bind 的 .sync 修饰符和组件的 model 选项已移除新增 4、支持多个v-model新增 支持自定义 修饰符 Modifiers

例子： 父组件

<template>
  {{ isShow }}-{{ name }}
  <button @click="isShow = !isShow">按钮</button>
  <VModel v-model:name.isUp="name" v-model="isShow" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import VModel from './views/v-model.vue';

let isShow = ref<boolean>(true);
let name = ref<string>("lfourg");

</script>

子组件

<template>
  <div>
    <button @click="update">按钮</button>
    {{ modelValue }}
    <input :value="name" type="text" @change="change"/>
  </div>
</template>

<script setup lang='ts'>
import {ref,reactive} from 'vue'

const props = defineProps<{
    modelValue:boolean,
    name:string,
    nameModifiers?:{
      isUp:boolean
    }
}>()

const emit = defineEmits(['update:modelValue','update:name']);
const update = ()=>{
    emit('update:modelValue',!props.modelValue)
}
const change=(e:Event)=>{
  //可以根据有没有isUp做不同的操作
   let isUp = props.nameModifiers?.isUp;
    console.log(isUp);
    const target = e.target as HTMLInputElement;
    emit('update:name',target.value)
}
</script>

自定义Hooks

主要用来处理复用代码逻辑的一些封装，这个在vue2大部分使用 Mixins

使用

自定义Hooks、指令综合案例

参考案例