记录下vue3父子组件中传参

一：父组件向子组件传参

在父组件中：

<template>
    我是父组件
    <son :para="para"/>
</template>

<script setup lang="ts">
import { ref } from "vue"

const para = ref<string>("我是子组件")
</script>

在子组件中：

<template>
    我是子组件
    <p>{{para}}</p>
    为了不冲突，也可以这样使用
    <p>{{props.para}}</p>
</template>

<script setup lang="ts">
const props = defineProps<{
  para:string
}>()
</script>

二：自定义事件; 可以从子组件中改变父组件的参数值

<template>
    我是父组件
    <son :para="para" @start="goToSon"/>
</template>

<script setup lang="ts">
import { ref } from "vue"

const para = ref<string>("我是子组件")

const goToSon = (newValue:string)=>{
    para.value = newValue:string
}
</script>

 在子组件中：

<template>
    我是子组件
    <button @click="son"></button>
</template>

<script setup lang="ts">
const props = defineProps<{
  para:string
}>()

const emits = defineEmits(["start"])

const son = ()=>{
  emits("start", "我会改变父组件中的参数")
}
</script>