标签：index const defineExpose defineEmits state tab 组件 type

前言

父子组件的值传递，在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>

标签：index,const,defineExpose,defineEmits,state,tab,组件,type
来源： https://www.cnblogs.com/nangezi/p/16175091.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。