<template>
</template>

<script setup lang="ts">
// 第一步：定義子組件里面的方法
const doSth = (str: string) => {
  console.log("子組件的 doSth 方法執(zhí)行了！" + str);
}
// 第二步：暴露方法
defineExpose({ doSth })
</script>

<style scoped>
</style>

<template>
  <button @click="getChild">觸發(fā)子組件方法</button>
  <!-- 第一步：定義 ref -->
  <HelloWorld ref="childRef" />
</template>

<script setup lang="ts">
// 一、導入
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

// 二、數(shù)據(jù)
// 第二步：定義與 ref 同名變量
const childRef = ref<any>();

// 三、函數(shù)
const getChild = () => {
    // 第三步： 調(diào)用子組件的方法或者變量，通過value
    childRef.value.doSth("隨便傳值！");
}
</script>

<style>
</style>

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

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

<template>
</template>

<script setup lang="ts">
import { onMounted } from "@vue/runtime-core";
const emit = defineEmits([ "doSth" ]);
const doSth = () => {
  emit('doSth');
}
onMounted(() => {
  doSth();
});
</script>

<style scoped>
</style>

<template>
  <!-- 第一步：使用 @do-sth 或 @doSth 接受方法 -->
  <HelloWorld @doSth="sayHello" />
</template>

<script setup lang="ts">
// 一、導入
import HelloWorld from './components/HelloWorld.vue';

// 二、函數(shù)
// 第二步： 自定義方法
const sayHello = () => {
  console.log("hello world!");
}
</script>

<style>
</style>

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>