子类获取父类的属性和方法
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>
网友评论