VUE3学习 第六章 V3自动引入插件、深入v-model、自定义指令directive、自定义Hooks、编写Vue3插件、

一、V3自动引入插件

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"
  })]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

配置完成之后使用ref reactive watch 等 无须import 导入 可以直接使用

GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup

二、v-model

TIps 在Vue3 v-model 是破坏性更新的
v-model在组件里面也是很重要的
v-model 其实是一个语法糖 通过props 和 emit组合而成的

1. 默认值的改变
   prop：value -> modelValue；
   事件：input -> update:modelValue；
   v-bind 的 .sync 修饰符和组件的 model 选项已移除
   新增 支持多个v-model
   新增 支持自定义 修饰符 Modifiers

1. v-model 单个绑定 和 多个绑定

案例（绑定一个 v-model 和 绑定多个 v-model）： 子组件

<template>
     <div v-if='propData.modelValue ' class="dialog">
         <div class="dialog-header">
             <div>标题</div><div @click="close">x</div>
         </div>
         <div class="dialog-content">
            内容
         </div>
         
     </div>
</template>
 
<script setup lang='ts'>
 
type Props = {
   
   modelValue:boolean   // 这里获取到父组件的 v-model 
}
 
type Props = {
      // 这里是绑定多个的写法  title 是第二个v-model
   modelValue:boolean,
   title:string
}
 
const propData = defineProps<Props>()
 
const emit = defineEmits(['update:modelValue']) // 这里前面必须加 updata
const emit = defineEmits(['update:modelValue','update:title'])  // 这里是  emit 绑定多个v-model 的写法

const close = () => {
   
     emit('update:modelValue',false)
     emit('update:title','我要改变')
}
 
</script>
 
<style lang='less'>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

父组件

<template>
  <button @click="show = !show">开关{
   {
   show}}</button>
  <Dialog v-model="show"></Dialog> // 这里绑定 v-model 然后给一个初始值
  <Dialog v-model:title='title' v-model="show"></Dialog> // 绑定多个 v-model 的写法  并且给 title 一个 title值   所以 默认的 v-model 写法应该是    v-model:modelValue="show"
</template>
 
<script setup lang='ts'>
import Dialog from "./components/Dialog/index.vue";
import {
   ref} from 'vue'
const show = ref(false)
const title = ref('我是标题')
</script>
 
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2. 自定义修饰符

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers prop

<script setup lang='ts'>
 
type Props = {
   
    modelValue: boolean,
    title?: string,
    modelModifiers?: {
     // 这里 后面 Modifiers是写死的  前面的对应上面的 名字   这里是 子组件的接受  父组件写的话 应该是这样的
    // 
  这里的 .isFlag 就是自定义的修饰符 
        default: () => {
   }
    }
    titleModifiers?: {
   
        default: () => {
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15