vue3父子组件传递参数:defineProps和defineEmits

api:

父组件→子组件: defineProps

子组件→父组件: defineEmits

demo

父组件

<template>

    <h3>父组件</h3>
    <el-input v-model="parentValue1"></el-input>
<Children :parentValue1="parentValue1" @sendValue1="sendValue1"></Children>
</template>
<script setup lang="ts">
import Children from './children.vue' 

let parentValue1 = ref('父组件值1')
const sendValue1 = (val)=>{
    parentValue1.value = val.value
}

setTimeout(() => {
    parentValue1.value = '异步的值'
}, 3000);
</script>

子组件

<template>  
  <h3>子组件</h3> 
  <el-input v-model="childrenValue1.value" @input="inputVal"></el-input>
  <el-button @click="getValue">查询</el-button> 
</template>
<script setup lang="ts">
let emit = defineEmits(['sendValue1'])
let props = defineProps({
    parentValue1:String
})

let childrenValue1 = computed(()=>{
    return toRef(props.parentValue1)
})
const getValue = ()=>{
    console.log(childrenValue1.value,'查看值')

}

watch(childrenValue1,(newVal,oldVal)=>{
},{
    immediate:true,
    deep:true
})

const inputVal = ()=>{
    emit('sendValue1',childrenValue1.value)
}
</script>