Vue3中父子组件传递

以下主要涉及到了父组件和子组件之间的自定义事件传递

父组件中的使用

// 父组件中的使用：
<DialogGroup
    v-for="(cItem, i) in chatTargetList"
    :key="cItem.chat_id"
    :chat-item="cItem"
    :index="i"
    :dislike-item-id="dislikeItemId"
    @previewImg="previewImg"
/>

在这里，父组件DialogGroup通过v-for循环创建了多个子组件实例，并将@previewImg事件绑定到了previewImg方法上。这意味着当子组件触发previewImg事件时，将调用父组件中的previewImg方法。

// 父组件中的previewImg方法：
function previewImg(img, id) {
    console.log('预览图片');
    previewItem.value = {
        ...img,
        chat_id: id,
    };
}

previewImg方法在父组件中定义了，它接受两个参数 img 和 id。当子组件触发previewImg事件时，这个方法会被调用，将子组件传递过来的参数用于处理。

子组件中的使用

// 子组件中的使用：

// defineEmits来声明了自定义事件
const emits = defineEmits([
    'useCont',
    'previewImg',
    'like',
    'dislike',
    'selectChatId',
]);
// 通过emits函数触发了previewImg事件，并传递了两个参数
function previewImg(img) {
    emits('previewImg', cloneDeep(img), props.chatItem.chat_id);
}

在子组件中，使用了defineEmits来声明了自定义事件，其中包括了’previewImg’。在previewImg方法中，通过emits函数触发了previewImg事件，并传递了两个参数，cloneDeep(img)和props.chatItem.chat_id。

子组件中的另一个组件使用previewImg

<TemlpateImageGrid
    :img-list="chatItem?.answer?.image_content"
    :is-share-dialog="isShareDialog"
    @preview="previewImg"
/>

这是子组件中的另一个组件TemlpateImageGrid，它通过@preview事件监听父组件中的previewImg方法。
当内部组件触发preview事件时，也将调用子组件中的previewImg方法，从而实现了事件的传递。

总体来说，父组件通过绑定事件和方法，使得子组件能够调用父组件中的方法，而子组件通过声明和触发自定义事件，将信息传递给父组件或其他子组件。