记录使用 Vue3 过程中的一些技术点

1、自定义组件，并使用 v-model 进行数据双向绑定。

简述： 自定义组件使用 v-model 进行传参时，遵循 Vue 3 的 v-model 机制。在 Vue 3 中，v-model 默认使用了 modelValue 作为 prop 名称，以及 update:modelValue 作为事件名称。

例子：

首先，我们创建一个自定义组件 MyInput.vue，该组件使用 语法，并允许通过 v-model 绑定值：

              import { defineProps, defineEmits, ref } from 'vue';    const props = defineProps({    modelValue: String  });    const emit = defineEmits(['update:modelValue']);    const updateValue = (event) => {    emit('update:modelValue', event.target.value);  };  

在这个例子中，使用了 defineProps 来定义 modelValue prop，它对应于 v-model 绑定的值。同时，我们使用 defineEmits 来声明 update:modelValue 事件，该事件将在输入框的值变化时被触发。

接下来，在父组件中使用这个自定义组件，并通过 v-model 绑定一个数据属性：

            
Value in Parent: {{ inputValue }}
                  import { ref } from 'vue';  import MyInput from './MyInput.vue';    const inputValue = ref('');  

在父组件中，导入了自定义的 MyInput 组件，并使用 v-model 将 inputValue 绑定到该组件的 modelValue prop 上。当 MyInput 组件中的输入框值变化时，它会触发 update:modelValue 事件，进而更新父组件中的 inputValue。

注意，在 中，不需要显式地返回任何东西给模板，因为所有的响应式状态（通过 ref 或 reactive 创建）和函数都会自动暴露给模板。这使得代码更加简洁和直观。

2、异步加载动态组件

  ├─ src                │  ├─ components                │  │  ├─ ChartA.vue           │  │  ├─ ChartB.vue          │  │  └─ ChartC.vue         │  └─ test-async.vue   └─ package.json                       

异步加载组件

方式一：

import { defineAsyncComponent } from "vue";const AsyncOne = defineAsyncComponent(() =>  import("@/components/ChartA.vue"));

方法二：vue3+vite5 中

import { defineAsyncComponent, ref } from "vue";const AsyncTwo = ref(null);AsyncTwo.value = registerComponent("/ChartC");// 使用异步组件的方式加载组件const registerComponent = (componentPath) => {  const modules = import.meta.glob("./components/**/*.{vue,tsx}");  for (const item in modules) {    if (item.includes(componentPath)) {      return defineAsyncComponent(modules[item]);    }  }};

异步加载动态组件

  import { defineAsyncComponent, onMounted, ref } from "vue";const componentsInfo = ref([  {    id: "1-1",    title: "图表A",    component: "/ChartA",  },  {    id: "1-2",    title: "图表B",    component: "/ChartB",  },  {    id: "1-3",    title: "图表C",    component: "/ChartC",  },]);onMounted(() => {  processLoad(componentsInfo.value);});const processLoad = (info) => {  for (let i = 0; i  {  //获取 src/components 文件夹下所有组件  const modules = import.meta.glob("./components/**/*.{vue,tsx}");   for (const item in modules) {    if (item.includes(componentPath)) {      return defineAsyncComponent(modules[item]);    }  }};

效果：

3、