VUE3 父组件中调用子组件方法

忒子

已于 2024-05-16 14:34:04 修改

阅读量1.8w

点赞数 15

文章标签：前端 javascript vue.js

于 2024-01-20 11:36:44 首次发布

本文链接：https://blog.csdn.net/weixin_53363875/article/details/135712847

版权

文章讲述了如何在Vue应用中使用`ref`直接调用子组件的方法，以及通过`defineExpose`实现父组件对子组件方法的访问。实例演示了如何在按钮点击事件中调用子组件的`reset`函数，并提及了父子组件间的传值功能。

摘要由CSDN通过智能技术生成

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>