Vue3的父子组件通信的其中两种

1.父传子

父组件

<template>
  <div>
    <AcMain :name=name></AcMain>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import AcMain from '../components/AcMain.vue';
const name = ref({
  name: father
})
</script>

子组件

<template>
  <div>
    <div>{{ name }}</div>
</template>
<script setup>
    defineProps(['name'])
    //或者
    const props = defineProps({
        url: {
          type: String,
          required: true
        },
        parse: {
          type: Function
        },
        reset: {
          type: Object
        },
        size: {
          type: Number,
          default: 20
        },
        max: {
          type: Number
        },
    })
</script>

2.子传父（方法一）defineEmits子组件主动调用方法

父组件

<template>
  <div>
    <AcMain :name=name @father=father></AcMain>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import AcMain from '../components/AcMain.vue';
    const name = ref({
      name: father
    })
    //xxx为子组件传递的值
    const father =(xxx) =>{
      console.log(1);
    }
</script>

子组件

<template>
  <div>
    <div @click="son">{{ name }}</div>
</template>
<script setup>
    defineProps(['name'])
    //需要先使用defineEmits注册一个自定义事件
    const emit = defineEmits(['father'])
    // 点击事件触发emit，去调用我们注册的自定义事件getValue，xxx为传递值
    const son = () => {
        emit('father'，xxx)
    }
</script>

2.子传父（方法二）defineExpose父组件主动调用子组件的某个方法或者属性

• 方法二 父组件

<template>
  <div>
    <AcMain ref="father">
    </AcMain>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
const father = ref(null)
const btnReset = () =>{
    father.value.resetRank();
}
</script>

子组件

<template>
  <div>
    <div>{{ name }}</div>
</template>
<script setup>
const fengFather = ref(0)
const resetRank = (()=>{
    console.log('我是你爹',father)
})
// 对外暴露重置方法/属性
defineExpose({
  fengFather,
  resetRank
})
</script>