01父子

子组件 HelloWorld.vue

<template>
  <div>
<h1>{{ props.money }}</h1>
<h2>{{ props.name }}</h2>
  </div>
</template>

<script setup lang="ts">
// 1.直接接收
let props=defineProps(['money','name'])
// 2.限制
// let props = defineProps({
//   money: {
//     type: Number,
//     default: 200,
//   },
//   name: {
//     type: String,
//     required: true,
//   },
// });
</script>

<style scoped lang="scss"></style>

父组件APP.vue
<template>
  <HelloWorld :money="money" :name="yan"></HelloWorld>
</template>

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
let money = ref(100);
let yan = ref("向画");
</script>

02子父

子组件 HelloWorld.vue
 
<template>
  <div>
    <button @click="put">点击</button>
  </div>
</template>

<script setup lang="ts">
let $emits = defineEmits(["define"]);
const put=()=>{
  $emits('define',13)
}
</script>

<style scoped lang="scss"></style>

父组件APP.vue

<template>
  <h1>{{ num }}</h1>
  <HelloWorld @define="define"></HelloWorld>
</template>

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
const num = ref(12);
const define = (parmas:number) => {
  console.log(parmas);
  num.value = parmas
};
</script>