vue3父组件调用子组件方法

最新推荐文章于 2024-06-21 18:59:59 发布

myWatermelons

最新推荐文章于 2024-06-21 18:59:59 发布

阅读量344

点赞数

文章标签： javascript 前端 vue.js 开发语言

本文链接：https://blog.csdn.net/myWatermelons/article/details/125663269

版权

vue3调用子组件的方法/修改子组件的数据

子组件

<template>
<div></div>
</template>

<script setup>
import { defineExpose, ref  } from 'vue' // defineExpose/defineEmits/defineProps默认是不用引入的

const dialogShow = (data) => {
  console.log(data)
}
const data = ref('我是要修改的数据')

defineExpose({
  dialogShow,
  data
})
</script>

父组件

<template>
<add-user-dialog ref="dialogShow"/>
<button @click="addUser"></button>
</template>

<script setup>
import addUserDialog from './addUser.vue'
import { ref} from 'vue'
const dialogShow = ref(null)
const addUser = () => {
  console.log(dialogShow)
  dialogShow.value.dialogShow(true)
}
</script>

修改子组件的数据

父组件

<template>
<add-user-dialog ref="dialogShow"/>
<button @click="addUser"></button>
</template>

<script setup>
import addUserDialog from './addUser.vue'
import { ref} from 'vue'
const dialogShow = ref(null)
const addUser = () => {
  console.log(dialogShow)
  dialogShow.value.data = '我是修改子组件的数据'
}
</script>