Vue3 父子组件传值，defineProps，defineEmits，以及父组件调用子组件的方法 defineExpose

前言

父子组件的值传递，在vue2中直接使用 props、this.$emit('xxx')即可，在Vue3中有较大的变化，父组件传递的值，只有在子组件使用 defineProps、defineEmits接收才可以使用

---

 

---

父子组件值传递

需要将父组件的参数使用defineProps，defineEmits承接，如下：

使用案例

// 父组件
<script setup>
import {
  ref,
  onMounted,
  reactive,
  toRefs,
  computed,
} from 'vue';
// tabs数据
const tabsData = [
  {
    type: 1,
    text: '111',
  },
  {
    type: 2,
    text: '222',
  },
  {
    type: 3,
    text: '333',
  },
]
const state = reactive({
  // active tab的序号
  activeTabIndex: 2,
});
// 切换tab
const changeTab = (index, tab) => {
  if (state.activeTabIndex === index) {
    return;
  }
  state.activeTabIndex = index;
  ...
};

const { activeTabIndex } = toRefs(state);
</script>

<template>
  ...
  <CustomTabs 
    :activeIndex="activeTabIndex" 
    :tabsData="tabsData"
    @changeTab="changeTab"
  />
  ...
</template>

// 子组件
<script setup>
import useCommonStoreState from '@/hooks/useCommonStoreState';
import { toRefs } from 'vue';

const props = defineProps({
  tabsData: {
    type: Array,
    required: true,
    default: [],
  },
  activeIndex: {
    type: Number,
    default: 0,
    required: true,
  },
});

const emits = defineEmits(['changeTab']);

// 切换tab
const changeTab = (index, tab) => {
  emits('changeTab', index, tab);
};

const { activeIndex, tabsData } = toRefs(props);
</script>
<template>
  <div class="custom-tabs-container" @touchmove.stop>
    <div
      class="tab"
      :class="`${activeIndex === index ? 'active' : ''}`"
      v-for="(tab, index) in tabsData"
      :key="tab.type"
      @click="changeTab(index, tab)"
    >
      <span>{{ tab.text }}</span>
    </div>
  </div>
</template>

---

 

---

父组件调用子组件的方法 defineExpose

需要将子组件的方法暴露出来，如下：

使用案例

// 子组件
<script setup>
// 结束loading
const stopLoading = () => {
  // 请求结束关闭loading
  state.listLoading = false;
}

// 开启error
const startError = () => {
  state.listError = true;
}

defineExpose({
  stopLoading,
  startError
})
</script>

// 父组件
<script setup>
const customListRef= ref(null);

// 获取大师列表
const queryRichList = async params => {
  try {
   ...
  }catch (error) {
    window.console.log(error);
    state.failed = true;
    // 报错回调
    vantListRef.value.startError();
  } finally {
    // 请求结束回调，结束loading
    vantListRef.value.stopLoading();
  }
};

<script>
<template>
  <CustomList
    ref="customListRef"
    v-show="list.length"
    :list="list"
    :finished="finished"
    @queryListData="queryRichList(queryParams)"
  >
</template>