<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> 在vue3中怎么写

在Vue 3中，`<right-toolbar>`组件可以这样实现，假设它接受`showSearch`和`@queryTable`事件绑定：

<template>
  <div>
    <!-- 使用v-bind动态绑定属性 -->
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">
      <!-- 可能有其他内联内容 -->
    </right-toolbar>

    <!-- 右侧工具栏对话框 -->
    <el-dialog
      v-model="open"
      :title="title"
      append-to-body
      @close="handleCloseDialog"
    >
      <el-button slot="footer" size="mini" @click="localStorage()">保存</button>
      <el-transfer
        :titles="['显示', '隐藏']"
        v-model="value"
        :data="columns"
        @change="dataChange"
      ></el-transfer>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义变量
const showSearch = ref(false);
const open = ref(false);
const title = "标题";

// 方法定义
function getList() {
  // 这里执行查询操作，具体取决于你的API或其他逻辑
  console.log('执行查询');
}

function localStorage() {
  // 本地存储操作，同样需要替换为实际的本地存储代码
  console.log('保存到本地');
}

function handleCloseDialog() {
  // 关闭对话框时的操作
  open.value = false;
}
</script>