vue3 setup语法子组件如何与父组件通信

子类获取父类的属性和方法

vue3 的setup中，子组件中接收数据需要用到 defineProps；向父组件提交事件，需要用 defineEmits

//父组件
<template>
 <GuideMask 
  :sum="sum"  // 传递值     
  @add="add" // 传递方法
 />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import GuideMask from "@/components/GuideMask.vue";

const sum = ref(1);
const add=(val)=>{
    sum.value = sum.value + val;
}
</script>

//子组件
<template>
  <button @click="handleAdd">改变page值:{{sum}}</button>
</template>

<script lang="ts" setup>
defineProps(["sum"]);//接收父组件传来的值
const emit = defineEmits(["pageFn"]); //定义一个变量来接收父组件传来的方法

const handleAdd = () => {
  emit("add", 2);
}
</script>

父类获取子类的属性和方法

vue3 的setup中，父类想要调用子类的数据需要先获取子类的 ref；当然光这样还是不够的，还需要用 defineExpose 在子类中对外进行暴露可以被外部获取的属性和方法。

//父组件
<template>
 <ChildCom ref="childComRef" />
 <button @click="handle">点击</button>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import ChildCom from "@/components/ChildCom.vue";

const childComRef = ref(null);

const handle = () => {
    const num = childComRef.value.num;
    childComRef.value.handleAdd();
}
</script>

//子组件
<template>
  <div>我是子组件</div>
</template>

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

const num = ref(1);

const handleAdd = () => {
  num.value++;
}

defineExpose({ num, handleAdd });  // 把组件中的属性和方法对外暴露
</script>