Vue3.x 速查

现在有什么基于vue3.0的优秀开源项目呢? -

黑马程序员前端的回答 - 知乎
https://www.zhihu.com/question/440658257/answer/3061646620

Vue3 组合式 API 的类型声明：

https://zhuanlan.zhihu.com/p/548294261?utm_id=0

Vue3解决definedProps无法引入外部Typescript类型定义

参考：https://juejin.cn/post/7190781993037070393

<script setup lang="ts">
    import { Role } from '@/services/Identity/dtos/roleDto';
    import type { PropType } from 'vue';

    const props = defineProps({
        // show: { type: Boolean, default: false },
        // roleId: { type: String, default: '' },
        role: { type: Object as PropType<Role>, default: {} },
    });

</script>

父组件与子组件通讯

监听子组件事件

• 子组件：roleModal.vue

<template>
    <div v-if="show">
      <h1> 子组件 </h1>
      <button type="button" @click="closeModal()">取消</button>
    <div>
</template>
<script setup lang="ts">
    import { ref } from 'vue'; 

    const show = ref<Boolean>(false);
    const colseEmits = defineEmits<{ (event: 'colse', param1: string, param2：string): void }>();  // 1.定义子组件事件

    const closeModal = () => {
        show.value = false;
        colseEmits('colse'，'sub-param1', 'sub-param2');   // 2.发布子组件事件
    };
</script>

• 父组件 : index.vue

<template>
    <div>
        <!--4.父组件订阅子组件事件-->
        <RoleModal @close="onClose" />
    <div>
</template>
<script setup lang="ts">
    // 3. 已入子组件
    import RoleModal from './roleModal.vue';

    //5. 父组件处理子组件事件
    const onClose= (param1: string, param2：string) => {
       // do somethings ...
    };
</script>

父组件调用子组件方法

• 子组件：roleModal.vue

<template>
    <div v-if="show">
      <h1> 子组件 </h1>
    <div>
</template>
<script setup lang="ts">
    import { ref } from 'vue'; 
    import { Role } from '@/services/Identity/dtos/roleDto';
    import { RoleService } from '@/services/Identity/roleService';

    const show = ref<Boolean>(false);
    const role = ref<Role>({} as Role);

    // 1.定义子组件中要向外暴露的函数
    const openModal = (id?: string) => {
        show.value = true;

        if (id) {
            RoleService.getRoleById(id).then((res) => {
                if (res.data) {
                    const resData = res.data;
                    role.value = resData;
                }
            });
        }
    };

    // 2. 向子组件外部暴露函数
    defineExpose({ openModal});
</script>

• 父组件 : index.vue

<template>
    <div>
        <button type="button" @click="addRole()">添加</button>
        <!--5. 子组件的ref赋值为：roleModalRef  -->
        <RoleModal ref="roleModalRef" />
    <div>
</template>
<script setup lang="ts">
    // 3. 已入子组件
    import RoleModal from './roleModal.vue';

    // 4. 定义 roleModalRef 
    const roleModalRef = ref<any>();

    const addRole = () => {
        // 6. 调用子组件方法
        roleModalRef.value.openModal('');
    };
</script>