vue3.0父子组件方法调用(setup语法糖)

1、父组件调用子组件方法

子组件

<script setup>
import { defineExpose } from 'vue'

// 定义父组件要调用的事件
function getTestList() {
  console.log('已经调用了子组件方法')
}

// 将父组件要调用的方法抛出去
defineExpose({ getTestList })
</script>
1
2
3
4
5
6
7
8
9
10
11

父组件

<template>
  <Test ref="TestRef">Test>
  <el-button type="danger" @click="handleTest">调用子组件方法el-button>
template>
1
2
3
4

<script setup>
//引入子组件
import Test from '@/components/test/index.vue'
import { ref } from 'vue'

// 定义子组件ref
const TestRef = ref()

// 调用子组件方法
function handleTest() {
  TestRef.value.getTestList()
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

2、子组件调用父组件方法

父组件

<template>
  <Test :getFatherList="getFatherList">Test>
template>
1
2
3

// 定义子组件要调用的方法
function getFatherList() {
  console.log('父组件的方法被调用了')
}
1
2
3
4

子组件

<template>
  <el-button type="primary" @click="clickFatherList">调用父组件的方法el-button>
template>
1
2
3

<script setup>
import { defineProps} from 'vue'

//定义参数 已经选中的ITEMID
const props = defineProps({
  getFatherList: {
    type: Function,
    default: Function,
    required: true,
  }
})

// 调用父组件的方法
function clickFatherList() {
  props.getFatherList()
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17