vite+ts+vue3 知识点（父子组件传参）

父传子 

如果你使用的是JS

父组件（js）

<template>
  <div>
    <div>我是父组件</div>
    <hr />
    <Son :data="data"></Son>
  </div>
</template>

<script setup lang="ts">
import Son from "@/components/son.vue";
const data = { name: "李子天" };
</script>

<style scoped></style>

子组件（js）

<template>
  <div>子组件 {{ data.name }}</div>
</template>

<script setup lang="ts">
const prop = defineProps({
  data: {
    type: Object,
    default: { name: "梁延涛" },
  },
});
console.log(prop.data);
</script>

<style scoped></style>

如果你使用的是TS

父组件（ts）

<template>
  <div>
    <div>我是父组件</div>
    <hr />
    <Son :data="data" :arr="[1, 2, 3]"></Son>
  </div>
</template>

<script setup lang="ts">
import Son from "@/components/son.vue";
let data = { name: "李子天" };
</script>

<style scoped></style>

子组件（ts）

<template>
  <div>子组件 {{ data.name }} {{ arr }}</div>
</template>

<script setup lang="ts">
const props = withDefaults(
  // 接收父组件传来的数据
  defineProps<{
    data: {
      name: string;
    };
    arr: number[];
  }>(),
  // 设置默认值
  {
    data: () => {
      return { name: "lala" };
    },
    arr: () => [0],
  }
);
console.log(props);
</script>

<style scoped></style>

子传父

如果你使用的是JS

子组件（js）

<template>
  <button @click="btn">子传父</button>
</template>

<script setup lang="ts">
// 给父组件传值
const emit = defineEmits(["toFatherClick"]);
const btn = () => {
  emit("toFatherClick", { age: 80 });
};
</script>

<style scoped></style>

父组件（js）

<template>
  <div>
    <div>我是父组件</div>
    <hr />
    <Son @toFatherClick="getAge"></Son>
  </div>
</template>

<script setup lang="ts">
import Son from "@/components/son.vue";
const getAge = (data) => {
  console.log(data);
};
</script>

<style scoped></style>

如果你使用的是TS

子组件（ts）

<template>
  <div>子组件 {{ data.name }} {{ arr }}</div>
  <button @click="btn">子传父</button>
</template>

<script setup lang="ts">
// 给父组件传值
const emit = defineEmits<{
  (e: "toFatherClick", arr: number[]): void;
}>();
const btn = () => {
  emit("toFatherClick", [1]);
};
console.log(props);
</script>

<style scoped></style>

父组件（ts）

<template>
  <div>
    <div>我是父组件</div>
    <hr />
    <Son @toFatherClick="getArr"></Son>
  </div>
</template>

<script setup lang="ts">
import Son from "@/components/son.vue";
const getArr = (arr: number[]) => {
  console.log(arr);
};
</script>

<style scoped></style>

暴露方法

子组件

<template>
  <div>子组件</div>
</template>

<script setup lang="ts">
// 暴露出去
defineExpose({
  name: "老天师",
  open: () => console.log(1)
});
</script>

<style scoped>

</style>

父组件

<template>
  <div>
    <div>我是父组件</div>
    <hr />
    <sonTest ref="mySon"></sonTest>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import sonTest from "@/components/son.vue";
const mySon = ref();

// 父组件要拿到子组件中暴露的数据必须在onMounted中获取
onMounted(() => {
  console.log(mySon.value?.name); // 老天师
  mySon.value?.open() // 1
})
</script>

<style scoped>

</style>