Vue3自動(dòng)引入插件

unplugin-auto-import/vite
vite配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),VueJsx(),AutoImport({
    imports:['vue'],
    dts:"src/auto-import.d.ts"
  })]
})

配置完成之后使用ref reactive watch 等 無(wú)須import 導(dǎo)入 可以直接使用

v-model

在Vue3 v-model 是破壞性更新的
v-model在組件里面也是很重要的
v-model 其實(shí)是一個(gè)語(yǔ)法糖 通過(guò)props 和 emit組合而成的

默認(rèn)值的改變

• prop：value -> modelValue
• 事件：input -> update:modelValue
• v-bind 的 .sync 修飾符和組件的 model 選項(xiàng)已移除
• 新增 支持多個(gè)v-model
• 新增 支持自定義 修飾符

案例：
子組件

<template>
     <div v-if='propData.modelValue' class="dialog">
         <div class="dialog-header">
             <div>標(biāo)題</div><div @click="close">x</div>
         </div>
         <div class="dialog-content">
            內(nèi)容
         </div>
     </div>
</template>
 
<script setup lang='ts'>
 
type Props = {
   modelValue:boolean
}
 
const propData = defineProps<Props>()
 
const emit = defineEmits(['update:modelValue'])
 
const close = () => {
     emit('update:modelValue',false)
}
 
</script>
 
<style lang='less'>
.dialog{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    &-header{
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    &-content{
        padding: 10px;
    }
}
</style>

父組件

<template>
  <button @click="show = !show">開關(guān){{show}}</button>
  <Dialog v-model="show"></Dialog>
</template>
 
<script setup lang='ts'>
import Dialog from "./components/Dialog/index.vue";
import {ref} from 'vue'
const show = ref(false)
</script>
 
<style>
</style>

綁定多個(gè)案例：
子組件

<template>
     <div v-if='modelValue ' class="dialog">
         <div class="dialog-header">
             <div>標(biāo)題---{{title}}</div><div @click="close">x</div>
         </div>
         <div class="dialog-content">
            內(nèi)容
         </div>
         
     </div>
</template>
 
<script setup lang='ts'>
 
type Props = {
   modelValue:boolean,
   title:string
}
 
const propData = defineProps<Props>()
 
const emit = defineEmits(['update:modelValue','update:title'])
 
const close = () => {
     emit('update:modelValue',false)
     emit('update:title','我要改變')
}
 
</script>
 
<style lang='less'>
.dialog{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    &-header{
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    &-content{
        padding: 10px;
    }
}
</style>

父組件

<template>
  <button @click="show = !show">開關(guān){{show}} ----- {{title}}</button>
  <Dialog v-model:title='title' v-model="show"></Dialog>
</template>
 
<script setup lang='ts'>
import Dialog from "./components/Dialog/index.vue";
import {ref} from 'vue'
const show = ref(false)
const title = ref('我是標(biāo)題')
</script>
 
<style>
</style>