2、组件

一、父子组件传值props

A、子组件

<template>
   <div><button>{{props.count}}</button></div>
</template>
<script setup>
import {defineProps} from 'vue'
const props = defineProps({
    count:{
        type:Number,
        default:0
    }
})
</script>

B、父组件

<template>
  <CountItem :count="count"></CountItem>
</template>
<script setup>
import { ref } from '@vue/reactivity'
import CountItem from './Children/CountItem.vue'
const count = ref(0)
</script>

二、子组件给父组件传值emit

A、子组件

<template>
   <div><button @click="handleChange">{{props.count}}</button></div>
</template>
<script setup>
import {defineProps,defineEmits} from 'vue'
/* 定义props属性 */
const props = defineProps({
    count:{
        type:Number,
        default:0
    }
})
/* 定义emit */
const emit = defineEmits({
    "onChangeCount":null
})
function handleChange(){
    emit("onChangeCount")
}
</script>

B、父组件

<template>
  <CountItem :count="count" @onChangeCount="handleCount"></CountItem>
</template>
<script setup>
import { ref } from '@vue/reactivity'
import CountItem from './Children/CountItem.vue'
const count = ref(0)
function handleCount(){
  count.value++
}
</script>