Vue3中<script setup>的用法记录

在Vue3中，在<script setup>中

一、父组件给子组件传参

父组件

<mainForm
  v-if="Object.keys(dataSource).length != 0"
  :dataSource="dataSource"
  @handle="handle"
/>

子组件

const props = defineProps({
  dataSource: Object,
});

const { dataSource } = toRefs(props);

二、子组件调用父组件

子组件

<template>
  <van-nav-bar
    title="XXX"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  ></van-nav-bar>
</template>
<script setup>
import { defineComponent, reactive, ref } from "vue";

const emit = defineEmits(["onClickLeft"]);
const onClickLeft = () => {
  emit("onClickLeft");
};
</script>
<style>
</style>

父组件

<NavBar @onClickLeft="onClickLeft" />

在父组件中可重写onClickLeft方法实现方法的多态性。

三、父组件调用子组件

子组件

defineExpose({
  onSubmit
});

父组件

<upload-customer-appendix
  ref="appendix"
></upload-customer-appendix>

父组件调用方式为：

const appendix = ref();

const uploadCustomerAppendixOk = () => {
  appendix.value.onSubmit();
};

注：若父子组件传值或相互调用出现undefined，可能是因为父组件或子组件用的不是<script setup>，没有return对应的变量导致的。

四、等待DOM加载完再操作

如绘制图表，可用：

import { onMounted, ref } from "vue";

onMounted(() => {
  //do stuff
});

五、页面间传参

传参页面：

router.push({
  path: "/newCollect",
  query: {
    mode: "edit",
  },
});

收参页面：

const mode = router.currentRoute.value.query.mode;

六、监控变量变化

引入watch

import { watch } from "vue";

监听变量变化

watch(showFieldsList, (newVal, oldVal) => {
  //do stuff
});