vue3父子组件传值调用方法

子组件:使用emit方法传值,使用defineExpose暴露出去
父组件:使用ref获取子组件内容,调用子组件方法
子组件showTime.vue

<template>
<div>{{date}}</div>
</template>
<script lang="ts" setup>
const date= ref();
const emit = defineEmits(['change']);
const onConfirm = () => {
  emit('change', allTime);
};
emit('change', date);
defineExpose({ onConfirm, date});//使用 defineExpose暴露出去
</script>
<style lang="scss" scoped></style>

父组件

<template>
<show-time ref="myRefs" @change="get"></show-time>
</template>
<script lang="ts" setup>
const myRefs= ref();//一定要先声明ref
const get= (val: any) => {
  console.log(val.value)//获取到子组件里的值
};
myRefs.value.onConfirm()//调用子组件的方法
</script>
<style lang="scss" scoped></style>

你可能感兴趣的:(vue,javascript,typescript,vue.js)