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

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

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

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

<!-- MyInput.vue -->  
<template>  <input :value="modelValue" @input="updateValue" />  
</template>  <script setup>  
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);  
};  
</script>

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

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

<!-- ParentComponent.vue -->  
<template>  <div>  <p>Value in Parent: {{ inputValue }}</p>  <MyInput v-model="inputValue" />  </div>  
</template>  <script setup>  
import { ref } from 'vue';  
import MyInput from './MyInput.vue';  const inputValue = ref('');  
</script>

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

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

2、异步加载动态组件

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

异步加载组件

方式一：

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

方法二：vue3+vite5 中

<template><AsyncTwo/>
</template><script setup>
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]);}}
};
</script>

异步加载动态组件

<template><div v-for="(item, index) in componentsInfo" :key="index"><component :is="item.loadComp" /></div>
</template><script setup>
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 < info.length; i++) {let item = info[i];if (!item.component) {continue;}let resComp = registerComponent(item.component);item.loadComp = resComp;}
};// 注册一个异步组件
const registerComponent = (componentPath) => {//获取 src/components 文件夹下所有组件const modules = import.meta.glob("./components/**/*.{vue,tsx}"); for (const item in modules) {if (item.includes(componentPath)) {return defineAsyncComponent(modules[item]);}}
};
</script>

效果：

3、