vue3组合式笔记

这篇具有很好参考价值的文章主要介绍了vue3组合式笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

分页示例代码：

  <!-- 示例dialog组件引入 -->
  <flight-dialog :key="addKey" ref="flightDialogRef" @submit="submit"></flight-dialog>
  
  const flightDialogRef = ref();
  // 调用子组件的方法
  flightDialogRef.value.init(key.value);
  // 调用父组件的方法
  const submit = (qarIds: sgtring[]) => {
	  qarIdValue.qarIds = qarIds;
	  recordParamsSavaAll();
	};

<template>
  <el-dialog v-model="visible" title="选择航班" @close="onClose">
    <el-table
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
      :data="data.dataLists"
      style="width: 100%"
      :row-key="(row) => row.qarId"
    >
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column prop="qarId" label="航班ID" width="180" />
      <el-table-column prop="tkoApt" label="起飞机场" width="180" />
      <el-table-column prop="lndApt" label="着陆机场" width="180" />
      <el-table-column prop="tkoTime" label="起飞时间" width="180" />
      <el-table-column prop="lndTime" label="着陆时间" width="180" />
    </el-table>
    <el-pagination
      :current-page="data.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="data.limit"
      :total="data.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle"
    >
    </el-pagination>
    <div class="flight-dialog-footer">
      <el-button @click="onClose">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle">确定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage, ElMessageBox } from "element-plus";
import basModuleApi from "@/api/basModuleApi";
import { IObject } from "@/types/interface";
import acRegUrl from "@/api/bas/basAcReg";
const { t } = useI18n();
const visible = ref(false);
// 子组件调用父组件的方法
const emits = defineEmits(["submit"]);

// 列表数据
let data = reactive({
  dataLists: [] as any[],
  page: 1,
  limit: 10,
  total: 10,
  params: {
    qarType: -1,
  },
});
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<any[]>([]);
// 复选框事件
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val;
};
// 关闭
const onClose = () => {
  visible.value = false;
  data.dataLists = []; // 清空数据
  multipleTableRef.value!.clearSelection(); // 取消复选框
};

// pageSize改变
const pageSizeChangeHandle = (val: number) => {
  data.page = 1;
  data.limit = val;
  flightRequest();
};

// 分页, 当前页
const pageCurrentChangeHandle = (val: number) => {
  data.page = val;
  flightRequest();
};

// 初始化数据
const init = (qarType: number) => {
  visible.value = true;
  data.params.qarType = qarType;
  data.page = 1;
  data.limit = 10;
  flightRequest();
};

const dataFormSubmitHandle = () => {
  if (multipleSelection.value.length > 0) {
    ElMessageBox.confirm("你确定要执行实时计算吗？", "执行确认", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then((val: string) => {
      const qarIds: String[] = multipleSelection.value.map(item =>  item.qarId);
      emits("submit", qarIds);
    });
  } else {
    ElMessage.warning("请选择要测试的航班");
  }
};

// 获取信息
const flightRequest = () => {
  baseService
    .get("/sys/derqarflight/getListByQarTypeId", {
      limit: data.limit,
      page: data.page,
      qarTypeId: data.params.qarType,
      isvalid: "Y",
    })
    .then((res) => {
      if (res.code == 0) {
        data.dataLists = res.data.list;
        data.total = res.data.total;
      }
    });
};

// 暴漏给父节点对象的方法 父组件获取子组件的方法
defineExpose({
  init,
});
</script>
<style scoped>
.flight-dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>

dfdf {{count}} {{state.count}}

// // 校验 submit 事件
// submit: ({ email, password }) => {
// if (email && password) {
// return true
// } else {
// console.warn(‘Invalid submit event payload!’)
// return false
// }
// }
// })

// function submitForm(email, password) {
// emit(‘submit’, { email, password })
// }
// <input
// type=“text”
// :value=“lastName”
// @input=“$emit(‘update:lastName’, $event.target.value)”
// />
import { onMounted, watch, watchEffect, computed, nextTick, reactive, ref } from “vue”;
import { CacheToken } from “@/constants/cacheKey”;
import baseService from “@/service/baseService”;
import { setCache } from “@/utils/cache”;
import { ElMessage } from “element-plus”;
import { getUuid } from “@/utils/utils”;
import app from “@/constants/app”;
import { useAppStore } from “@/store”;
import { useRouter } from “vue-router”;
import { useI18n } from “vue-i18n”;

const store = useAppStore();

const router = useRouter();
const { t } = useI18n();

// 在一个特定的 DOM 元素或子组件实例被挂载后，
// 获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个 input 元素上，
// 或在一个元素上初始化一个第三方库
const inputRef = ref<HTMLInputElement | null>(null)

// 定义响应式变量
const count = ref(0);
// 返回原始对象的代理对象（proxy)
const raw = { count: 0 };
// 定义响应式对象
const state = reactive(raw)

// 一个计算属性 ref
const computedValue = computed(() => {
return state.count > 3 ? ‘Yes’ : ‘No’
})

// 侦听状态后，执行异步操作；不能直接侦听响应式对象的属性值
watch(state, async (newValue, oldValue) => {
console.log(newValue.count, oldValue.count);
})

// getter函数侦听
watch(() => state.count, (count)=>{
console.log(‘getter-count-watch’+count);
})
// 多属性侦听
watch([() => state.count, state], ([count, state])=>{
console.log(‘多-getter-count-watch’+count);
console.log(‘多-count-watch’, state.count);

// 立即执行；获取更新后的dom

},{ immediate: true, flush: ‘post’ })

// 副作用侦听
watchEffect(() => {
// 立即执行watch
console.log(‘watchEffect’ + state.count)

},{flush: ‘post’ })

const clickment = () => {
count.value++;
state.count++;
// raw.count++;
nextTick(() => {
// 访问更新后的 DOM

// ref
(inputRef.value as any).focus()

})
}
// 在组件完成初始渲染并创建 DOM 节点后运行
onMounted(() => {
console.log("count: " + count);
});

setTimeout(() => {
onMounted(() => {
// 异步注册时当前组件实例已丢失
// 这将不会正常工作
})
}, 100)

父子组件传值

props接收的是字符串不需要加冒号:url,变量才需要冒号:visible文章来源地址https://www.toymoban.com/news/detail-460663.html

// 父组件 监听事件@refreshDataList
<import url="dfdf" title="fafa" :visible="false" ref="importRef"  @refreshDataList="refreshDataListHandle"></import>
// 父组件调用子组件的方法
const importRef = ref();
const importHandle = () => {
  importRef.value.init(`sys/qardecodetypeconf/upload?qarTypeId=${1}`)
}
// 监听事件
const refreshDataListHandle = (bol:boolen) => {
  conosle.log(bol);
}


// 子组件
const props = defineProps(["url","title","visible"])
console.log(props.url);
console.log(props.title);

// 子组件绑定事件
const emit = defineEmits({
  refreshDataList: (bol:boolean)=>{
    if (bol != null) {
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false
    }
  }
});
// 子组件发布事件
emit.refreshDataList(true)

// 子组件方法
const init = (path: string) => {
  visible.value = true;
  url.value = getTokenUrl(path);
  console.log(url.value)
  
  fileList.value = [];
};
// 子组件暴露方法
defineExpose({
  init
});