vue3父传子,子传父(子组件直接修改父组件值)

父组件代码

<template>
<p>父组件</p>
{{num}}
<button @click="add">+1</button>
<About v-model:child="num"></About>
</template>
<script lang="ts" setup>
import About from "./views/About.vue";
import { ref } from "vue";
const num = ref(20);
const add = () => {
  num.value++
}
</script>
<style scoped></style>

子组件代码

<template>
<p>子组件</p>
{{child}}
<button @click="add">+1</button>
</template>
<script lang="ts" setup>
// 接受父组件传递的值
const props = defineProps({
  child:{
    type:Number,
    default:0
  }
})
// 子传父,v-model写法,可以直接修改父组件的值
const emit = defineEmits<{
  // update:固定写法,child就是上面的children
  (event:'update:child',n:number):void
}>()
let n = props.child;
// 定义事件,把值传递给父组件,
const add = () => {
  let res =  n++ // props的值不能修改
  console.log(res)
  emit('update:child',res)
}
</script>
<style scoped></style>