整体记录

1.v-mode 父传子

4.vue2.vue3props区别定义默认值传递函数类型

2.solot插槽

3.eachrsx,y轴属性

5.ts(必须)

6.promises await捕获错误

7.闭包理解

8.原型链理解

9.作用域理解

10.变量提升

11.为什么推荐使用外链式css

12.性能优化

13.vite引入外部第三方组件配置

14.element-plus

15.自定义表单组件 json格式传参如何定义的

vue2vue3v-model区别

[vue2vue3v-model区别] blog.csdn.net/wu_xianqian…

# vue3 父子组件通信方式总结

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

<custom-input v-model="searchInput"></custom-input>

但是像单选框、复选框等类型的输入控件可能会将 value 作为服务器提交时的内容，可以通过 mode 来指定其他属性

Vue.component('custom-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

<custom-checkbox v-model="selectFramework"></custom-checkbox>

vue3

v-model prop 和事件默认名称已更改：

prop属性：value 变为-> modelValue； event事件：input 变为-> update:modelValue；

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 属性并接收抛出的 update:modelValue 事件：

Vue.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input
      v-bind:value="modelValue"
      v-on:input="$emit('update:modelValue', $event.target.value)"
    >
  `
})

<custom-input v-model="searchInput"></custom-input>

v-model参数新增

若需要更改 model 名称，而不是更改组件内的 model 选项，那么现在我们可以将一个参数传递给 model：

Vue.component('custom-checkbox', {
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('update:checked', $event.target.checked)"
    >
  `
})

<custom-checkbox v-model:checked="selectFramework"></custom-checkbox>

我们在上面的代码中可以看到 v-model 后面加上了冒号传递参数 :checked ，表示 v-model 绑定的是 checked 属性，在触发的事件通过 update:属性 指定，注意格式是固定的，必须 update: 加上属性名称。

sync修饰符删除 vue3删除了

如果需要的话，父级可以监听该事件并更新本地 data property。例如：

<custom-checkbox :checked="selectFramework" @update:checked="selectFramework = $event"></custom-checkbox>

为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：

<custom-checkbox :checked.sync="selectFramework"></custom-checkbox>

vue3 中 bind 的 .sync修饰符和组件的 model 选项已移除，统统都要使用 v-model 作为代替；

<custom-checkbox v-model:checked="selectFramework"></custom-checkbox>

而且允许我们在自定义组件上使用多个 v-model。

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- 简写： -->

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

之前是自定义组件上只能使用一个，现在改为可以使用多个了。

vue2vue3props

vu3props

，这两大类都需要使用defineProps来进行定义

语法糖版本单文件模式

const props = defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // 自定义类型校验函数
  propF: {
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // 函数类型的默认值
  propG: {
    type: Function,
    // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
    default() {
      return 'Default function'
    }
  }
})

ts语法

interface ganttChartItem {
    // 宽度
    width: number,
    // 颜色
    color: string
}

interface Props {
    // id
    id:string
    // 宽度
    width: number,
    // 高度
    height?: number,
    // 是否初始化
    init?: boolean,
    // 子项
    list?: Array<ganttChartItem>,
    // 是否显示描述
    desc?:string
    // 描述颜色
    descColor?:string
}
const props = withDefaults(defineProps<Props>(), {
    // 高度默认20
    height: 20,
    // 默认初始化
    init: true,
    // 子项默认为空
    list: () => [],
    // 是否显示描述
    desc: '',
    // 描述颜色
    descColor: ''
});

特殊点：

泛型，可以通过定义interface接口来规范props的属性的格式。不像vue2中定义一个对象类型的属性，这个对象中可以有各种各样的子属性。
?: 表示可选属性，:表示必填属性
定义默认属性值时需要使用withDefaults

取值

取值时可以当成一个普通的对象，例如：

props.desc

监听

watch(
    () => props.visible,
    (val) => {
        open.value = val;
        console.log(val);
    }
);

demo

<a-b v-model:visible="show" />

//ab.vue

<template>
    <div class="container">
        <el-dialog v-model="open" title="Tips" width="30%">
            <span>This is a message</span>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue';
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
});
const open = ref(false);
watch(
    () => props.visible,
    (val) => {
        open.value = val;
        console.log(val);
    }
);
</script>

感觉setup语法糖模式用的更多一点（可能是我们公司用的比较多）。好久没这样用了，差点忘记怎么写了😀

普通组合式

 props: {
     visible: {
         type: Boolean,
         default: false
     }
 },

使用

使用时需要通过setup函数传参的方式来取值。

 setup(props) {
     return {
         props
     };
 }

监听

 watch(
     () => props.visible,
     (val) => {
         open.value = val;
         console.log(val);
     }
 );

demo

<template>
    <div>
        <el-dialog v-model="open" title="Tips" width="30%">
            <span>This is a message</span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { defineComponent, watch, ref } from 'vue';
export default defineComponent({
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const open = ref(false);
        watch(
            () => props.visible,
            (val) => {
                open.value = val;
                console.log(val);
            }
        );
        return {
            open
        };
    }
});
</script>

vue3 ts defineProps 、defineEmits的使用

//子组件声明props  （个人觉得这种既可以标注ts类型也可以设置默认值，推荐这个）
const props = defineProps({
  imgList: {
    default: [],
    type: Array<UploadUserFile>
  },
  limit: {//默认图片上传数量，默认是1
    type: Number,
    default: 1,
  },
  multiple: {//是否支持多选文件
    type: Boolean,
    default: false,
  },
  typeNumber: {
    type: Number,
    default: 18,
  },
})

//声明父组件传递下来的事件（ts版）（父组件在调用子组件的地方绑定自定义事件给子组件传递事件函数）
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
//触发
const click = () => {
  emit('change', 1)  
  emit('update', 'abc')
}

//ts版 声明props
// 1.接收父组件传值
const props = defineProps<{
  foo: string
  bar?: number
}>()
 
// 2.想要设置默认值，通过 withDefaults 编译器宏
interface Props {
  msg?: string
  labels?: string[]
}
 
const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})