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、指令綜合案例

參考案例