vue3 父子组件传值 —— drawer抽屉的封装

一、问题

在点击预览的时候会弹出drawer抽屉，想对drawer抽屉进行单独封装。​​​使用了v-model来是否显示 Drawer导致在传值的时候出现问题，后来用model-value来替就可以了。

二、父组件

<template lang="">
  <div>
    <el-card style="width: 100%">
      
      <el-table
        :data="tableData"
        :table-layout="fixed"
        style="width: 100%;height: 418.3px;"
        ref="tableRef"
      >
      ...
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <!-- 点击弹出drawer抽屉预览 -->
            <el-button size="small"
              circle
              :icon="Star"
              type="success"
              @click="handlePreview(scope.row)"
            />
         
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    ...
    <!-- 子组件 -->
    <MoviesPreview :drawer="drawerVisible"/>
  </div>
</template>
<script setup>
import MoviesPreview from '@/views/movie/MoviesPreview'
import { ref,reactive } from "vue";
import { Star } from "@element-plus/icons-vue";

...

// 定义drawer抽屉状态
const drawerVisible = ref(false);

//浏览回调
const handlePreview = (data) => {
  drawerVisible.value = true;
};

三、子组件

<template lang="">
  <div>
    <el-drawer :model-value="drawer"
     @update:model-value="handleUpdateVisible" 
     :with-header="false" size="70%">
      <div class="preview-left">
        ...
      </div>
     
    </el-drawer>
  </div>
</template>
<script setup>
import { ref, defineProps,defineEmits } from "vue";
//接收过来的值
const props = defineProps({
  drawer: Boolean,
});
// 再把值传出去
const emits = defineEmits(['update:drawer']);
// 处理 drawer 更新的方法
const handleUpdateVisible = (newValue) => {
  emits('update:drawer', newValue);
};
</script>