vue3 setup 父页面调用子组件及子组件调用父页面方法的DEMO

智昕 / 2023-05-11 / 原文

父页面调用子组件中方法

父页面

<template>
  <div>
    <!-- 第四步：页面使用子组件，并添加 ref 属性，注意ref属性不能和子组件重名 -->
    <role-card ref="roleRef"></role-card>
  </div>
</template>
<script lang="ts" setup>
import {ref,reactive, Ref} from 'vue'
 
// 第三步：父页面引入子组件
import roleCard from "./role-card.vue";
 
// 第五步，获取页面的ref属性，用同名属性值接收（因此在第三步不能和子组件同名）
let roleRef = ref()
 
// 第六步，使用 [ref].value 调用子组件中的方法
roleRef.value.initData()

子组件

<template>
  <div>
    这是一个子组件
  </div>
</template>
 
<script setup lang="ts">
import { ref, Ref, reactive } from 'vue'
 
 
// 第一步：子组件中声明方法
const initData = async () => {
    console.log('初始化子组件数据')
}
 
// 第二步 重要 ：使用 defineExpose 声明父组件要调用的方法
defineExpose({
  initData
})
 
</script>

子组件调用父页面中方法

1.在子组件里引入useContext
import { useContext } from "vue";
2.获取上下文
const ctx = useContext();
3.在需要调用父组件的地方写上下面的代码进行调用
ctx.emit(‘fatherMethod’); //fatherMethod 是想要调用父组件的一个方法