随笔- 28 文章- 226 评论- 27 阅读- 130万

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

父页面调用子组件中方法

父页面

<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>

子组件调用父页面中方法

子组件

<template>
</template>
 
<script setup lang="ts">
import { onMounted } from "@vue/runtime-core";
const emit = defineEmits([ "doSth" ]);
const doSth = () => {
  emit('doSth');
}
onMounted(() => {
  doSth();
});
</script>
 
<style scoped>
</style>

父页面

<template>
  <!-- 第一步：使用 @do-sth 或 @doSth 接受方法 -->
  <HelloWorld @doSth="sayHello" />
</template>
 
<script setup lang="ts">
// 一、导入
import HelloWorld from './components/HelloWorld.vue';
 
// 二、函数
// 第二步： 自定义方法
const sayHello = () => {
  console.log("hello world!");
}
</script>
 
<style>
</style>