标签: vue3

事件总线-非父子组件通信

安装

pnpm install mitt

游鹄君2026/5/16大约 1 分钟

vue3的基础使用(一)

ref()和reactive()

ref()

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：

可以看出，ref() 函数返回一个可变的响应式 ref 对象，它包含一个名为 value 的属性，我们可以通过 .value 访问其中的值：

//初始化加载样式
const loading = ref(true);
//是否开启弹窗
const dialogVisible = ref(false);
//弹窗标题
const dialogTitle = ref("");

//添加用户
const handleAddUser = () => {
  dialogTitle.value = "添加顶级用户";
  dialogType.value = 10;
  dialogVisible.value = true;
};

游鹄君2026/5/13大约 2 分钟

vue3的基础使用(二)

计算属性,defineModel(),watch()侦听器

示例用户列表的分页(父组件)

下面代码父组件定义计算属性和侦听器

src\pages\laravel-fast-api\v1\user\user\userList\index.vue

<!-- 分页区开始 -->
<template #paginate>
<div>
	<YhPaginate
	v-model:current-page="currentPage"
	v-model:page-size="pageSize"
	v-model:total="total"
	:page-sizes="[5, 10, 20, 30, 40, 50,100]"
	/>
</div>
</template>
<!-- 分页区结束 -->

<script setup lang="ts">
//搜索查询条件
const where = ref({
  //查找内容
  find: "",
  //查找下标
  findSelectIndex: 0,
  //时间范围
  timeRange: [],
  //是否禁用
  switch: null,
  //排序方式
  sortType: 2,
  // 0 不导出 1导出
  isExport: 0,
  // 导出类型 1本页 2全部
  exportType: 1,
  // 分页
  currentPage: 1,
  //每页条数
  pageSize: 10,
  //数据总数
  total: 0,
});
//将分页处理定义为计算属性
//当前页
const currentPage = computed({
  get() {
    return where.value.currentPage;
  },
  set(newValue) {
    where.value.currentPage = newValue;
  },
});
//页面条数
const pageSize = computed({
  get() {
    return where.value.pageSize;
  },
  set(newValue) {
    where.value.pageSize = newValue;
  },
});
//计算总数
const total = computed({
  get() {
    return where.value.total;
  },
  set(newValue) {
    where.value.total = newValue;
  },
});

//侦听分页变化
watch([currentPage, pageSize], () => 
{
	getUserList()
})
</script>

游鹄君2026/5/13大约 6 分钟