vue3用<script setup lang="tsx">格式,子组件调用父组件方法?

1. 使用 defineExpose 暴露子组件的方法给父组件(不直接调用父组件方法,但可用于间接通信)

虽然这不是直接调用父组件方法的方式,但 defineExpose 可以让父组件通过 ref 访问子组件的方法和属性,从而可能实现一些间接的通信逻辑。

2. 通过自定义事件(推荐方式)

这是 Vue 中最推荐的父子组件通信方式。子组件通过 $emit 触发一个自定义事件,父组件监听这个事件并作出响应。

子组件 (Child.vue 或 Child.tsx):

<script setup>  
import { defineEmits } from 'vue';  
  
const emit = defineEmits(['callParentMethod']);  
  
function childMethod() {  
  // 子组件内部逻辑  
  // ...  
  // 调用父组件方法,通过事件触发  
  emit('callParentMethod', someData);  
}  
</script>  
  
<template>  
  <button @click="childMethod">Call Parent Method</button>  
</template>

父组件:

<template>  
  <Child @callParentMethod="parentMethod" />  
</template>  
  
<script setup>  
import Child from './Child.vue'; // 或 Child.tsx  
  
function parentMethod(dataFromChild: any) {  
  // 处理子组件传递的数据  
  console.log(dataFromChild);  
}  
</script>

3. 通过 provide 和 inject(适用于跨多层级组件通信)

虽然这不是直接调用父组件方法,但 provide 和 inject 可以在组件树中任意位置进行通信。你可以在父组件中使用 provide 提供一个方法或数据,然后在子组件(或任何子组件的子孙组件)中使用 inject 接收它。

父组件:

<script setup>  
import { provide } from 'vue';  
  
function parentMethod() {  
  // 父组件的方法  
}  
  
provide('parentMethod', parentMethod);  
</script>

子组件:

<script setup>  
import { inject } from 'vue';  
  
const parentMethod = inject('parentMethod') as () => void;  
  
function callParent() {  
  if (parentMethod) {  
    parentMethod();  
  }  
}  
</script>  
  
<template>  
  <button @click="callParent">Call Parent Method</button>  
</template>

综上所述,虽然 <script setup> 使得直接访问 $parent 或 $emit 变得不那么直接,但 Vue 提供了其他强大的机制来实现父子组件之间的通信。在这些机制中,通过自定义事件进行通信是最直接和推荐的方式。

复制内容


评论


乖,登录后才可以留言! 登录

Copyright © 2020-2023 春藤技术,春藤建站 All Rights Reserved
备案号:豫ICP备20020705号 公网安备 51LA统计