1:通过ref直接调用子组件的方法 ref="RefChild";
2:在函数中写 RefChild.value.reset();, “reset”为子组件中定义的函数名。
3:子组件定义一个函数 reset(),使用defineExpose抛出,让父组件调用即可。
4:这个方法也可以进行传值,在括号中传入值,子组件接收即可 。
<template>
<div class="vc-box">
<el-button-group>
<el-button
:type="tabletype === '1' ? 'primary' : ''"
@click="selectTable('1')"
>按钮1</el-button
>
<el-button
:type="tabletype === '2' ? 'primary' : ''"
@click="selectTable('2')"
>按钮2</el-button
>
<el-button
:type="tabletype === '3' ? 'primary' : ''"
@click="selectTable('3')"
>按钮3</el-button
>
</el-button-group>
<Child
ref="RefChild"
@onselect="handleCriterionChange"
v-if="tabletype === '测试'"
></Child>
</div>
</template>
<script name="index" setup lang="ts">
import Child from '@/modular/analysis/components/child.vue';
const tabletype = ref();
// 获取子组件的引用
const RefChild = ref();
const selectTable = i => {
if (RefChild.value) {
RefChild.value.reset();
}
}
const handleCriterionChange = (type: number) => {
console.log('输出点击事件')
}
</script>
<template>
<el-form :model="criterionForm">
<el-form-item label="规范类别">
<el-select
v-model="criterionForm.criterionType"
class="m-2"
style="width: 130px"
placeholder="Select"
size="default"
@change="type => emits('onselect', type)"
>
<el-option
v-for="item in criterionOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
import { Ref } from 'vue';
const emits = defineEmits<{ (e: 'onselect', value: number): void }>();
const criterionForm: Ref<{ criterionType: number }> = ref({
// 默认展示全部
criterionType: 0
});
const reset = () => {
criterionForm.value.criterionType = 0;
};
const criterionOptions = [
{
label: '全部',
value: 0
},
{
label: '合格',
value: 1
},
{
label: '不合格',
value: 2
}
];
defineExpose({
reset
});
</script>