VUE3（三十八）Vue3.2子父组件交互（vue、ts分离）

camellia2023-10-11 18:12

最开始，尝试VUE3.2的子父组件调用的时候，我是将html代码和TS代码都写在了一个文件中，这样写比较简单，但是在后期维护的时候可能会比较麻烦，还是分文件写，html代码就放到VUE文件中，TS代码就放到TS中，这样最好。

那首先，我们先来改造我们的自定义组件menu

改造前的代码参照：《VUE3（三十七）Vue3.2子父组件交互（vue、ts不分离）》

这里先放一下改造后的代码：

Menu.vue

xml 复制代码 
<template>
  <!-- 手机底部菜单（别问我为什么把现成的组件又封了一个自定义组件，问就是为了试试子传父、父传子、子调父、父调子） -->
  <van-tabbar
    v-model="active"
    @change="onChange"
    active-color="#24657D"
    inactive-color="#323233"
  >
    <van-tabbar-item icon="wap-home" to="/phone/index">首页</van-tabbar-item>
    <van-tabbar-item icon="font" to="/phone/gossip">杂谈</van-tabbar-item>
    <van-tabbar-item icon="comment" to="/phone/placeFile">归档</van-tabbar-item>
    <van-tabbar-item icon="friends" to="/phone/personal">我的</van-tabbar-item>
  </van-tabbar>
</template>
 
<script lang="ts" setup>
import { defineExpose, defineProps } from "vue";
import {
  // 这里是方法
  Mounted,
  getIndexDataList,
  getOtherData,
  getPlaceFileData,
  getPersonalData,
  getUserSessionData,
  onChange,
  test,
  // 这里是变量
  active,
} from "/@/assets/js/components/phone/Menu";
// ====================================================
// 将组件中的属性暴露出去，这样父组件可以调用
defineExpose({
  getIndexDataList,
  getOtherData,
  getPlaceFileData,
  getPersonalData,
});
// ====================================================
// 接受父组件  传递来的参数
const props = defineProps({
  activeDefine: {
    type: String,
    default: "",
  },
});
// 父组件传递来的参数赋值 子组件中的参数
active.value = parseInt(props.activeDefine);
console.log(props);
// ====================================================
// 测试参数传递
test(props.activeDefine);
// ====================================================
// 调用生命周期函数
Mounted();
</script>

上方的代码中，我们需要注意以下几个问题：

1：defineExpose、defineProps 两个函数必须在setup下调用才可以。

2：defineExpose是用来暴露子组件参数及方法的。

3：defineProps是用来接受父组件传递给子组件参数的。

4：父组件传递过来的参数，可以通过函数传参调用传递在TS文件的方法中处理。

我们在来看一下组件对应的TS文件：

Menu.ts

typescript 复制代码 
import { reactive, ref, toRefs,onMounted,defineEmits,defineExpose,defineProps } from "vue";
// 引入axios钩子
import axios from "/@/request/axios";
// 引入路由
import { useRouter, useRoute } from "vue-router";
// 引入公共js文件
import utils from "/@/assets/js/public/function";
// api 接口文件
import {
    getIndexData,
    getRemarkList,
    getFileList,
    getUserSession,
} from "/@/api/phone/index";
import { common, userinfo } from "/@/hooks/common";
import { Toast } from "vant";
 
const data = reactive({
    // tabbar 默认选中索引
    active: 0,
});
 
/**
 * @name: 将data绑定值dataRef
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-01-10
 */
export const { active } = toRefs(data);
 
/**
 * @name: 调用生命周期onMounted
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2023-01-10
 */
export const Mounted = () => {
    onMounted( ()=>{
        // =============================================
        // 初始调用
        getUserSessionData();
    });
}
 
/**
 * @name: tabbar 发生改变时
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 * @param:  index   number  索引
 */
export const onChange = (index:any): void => { };
 
/**
 * @name: 获取首页数据公共方法
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 * @param:  page    number  页码
 * @param:  search  string  搜索值
 * @param:  category_id number  分类
 */
export const getIndexDataList = async(
    page: number = 1,
    search: string = "",
    category_id: number = 0,
    sign: boolean = true
): Promise<any> => {
    const dataLists = ref<any>();
    const actives = ref<number>(0);
    // 判断是否为数字
    if (parseFloat(page).toString() == "NaN") {
        page = 1;
    }
    // 请求数据
    // getUserSessionData();
    try {
        Toast.loading({
            message: "加载中...",
            forbidClick: true,
        });
        // utils.alertLoadExec(true);
        let param = {
            page: page,
            search: search,
            category_id: utils.encryptCode({ category_id: category_id }),
        };
        await getIndexData(param).then(function (response: any) {
            response.page = page;
            response.category_id = category_id;
            // console.log(response);
            // 传递数据给父组件
            // $myemit("getIndexDataList", response);
            dataLists.value = response;
            utils.sleep(1500).then(() => {
                // 这里写sleep之后需要去做的事情
                Toast.clear();
            });
        });
    } catch (error) {
        console.log("chucuole");
        // 自定义loading消失
        // utils.alertLoadExec(false);
        Toast.clear();
    }
    actives.value = 0;
    // 返回参数
    return {dataLists,actives}
};
 
/**
 * @name: 获取杂谈页数据
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 * @param:  page    number  页码
 */
export const getOtherData = async(sign: Boolean = true): Promise<any> => {
    Toast.loading({
        message: "加载中...",
        forbidClick: true,
    });
    const result = ref<any>();
    const actives = ref<number>(0);
    try {
        let param = {};
        await getRemarkList(param).then(function (response: any) {
            // 传递数据给父组件
            // $myemit("getOtherData", response);
            result.value = response;
            utils.sleep(1500).then(() => {
                // 这里写sleep之后需要去做的事情
                Toast.clear();
            });
        });
    } catch (error) {
        console.log("chucuole");
        Toast.clear();
    }
    actives.value = 1;
    // 返回参数
    return {result,actives};
};
 
/**
 * @name: 去归档页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 */
export const getPlaceFileData = async(sign: Boolean = true): Promise<any> => {
    // utils.alertLoadExec(true);
    Toast.loading({
        message: "加载中...",
        forbidClick: true,
    });
    const result = ref<any>();
    const actives = ref<number>(0);
    // 请求数据
    try {
        let param = {};
        await getFileList(param).then(function (response: any) {
            // 传递数据给父组件
            // $myemit("getPlaceFileData", response);
            result.value = response;
            utils.sleep(5000).then(() => {
                // 这里写sleep之后需要去做的事情
                Toast.clear();
            });
        });
    } catch (error) {
        console.log("chucuole");
        Toast.clear();
    }
    actives.value = 2;
    // 返回参数
    return {result,actives};
};
 
/**
 * @name: 去个人中心页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 */
export const getPersonalData = (): any => {
    // data.active = 3;
    const actives = ref<number>(0);
    actives.value = 3;
    // 返回参数
    return {actives};
};
 
/**
 * @name: 获取用户登录信息
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const getUserSessionData = (): void => {
    try {
        let param = {};
        getUserSession(param).then(function (response: any) {
            userinfo.email = response.email;
            userinfo.figureurl = response.figureurl;
            userinfo.nickname = response.nickname;
            userinfo.userid = response.userid;
        });
    } catch (error) {
        console.log("登录信息出错！");
    }
};
 
/**
 * @name: 测试参数传递
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const test = (val:any) => {
    console.log(val)
}

这个原理其实跟后端语言的原理很像，就是调用函数，然后接受函数的返回值，我这里的调用原理是，父组件调用子组件的方法，子组件的方法请求数据库，再将获取到的数据返回给父组件，父组件拿到数据之后，进行页面渲染。基本原理就是这个样子。

需要注意，数据请求是Promise异步请求，我们需要使用async和await来将数据赋值给我们定义的变量（详细使用参考上方代码）。

剩下的代码其实就没什么可说的了，将获取到的数据赋值到ref绑定的变量中，return就可以了（也可以绑定到普通变量上）

下边，我们来说一下父组件是如何调用子组件的。

父组件：index.vue

xml 复制代码 
<template>
  <!-- header -->
  <div class="header">
    <van-nav-bar title="时间里的" />
    <!-- 搜索框 -->
    <van-search
      v-model="search"
      show-action
      placeholder="请输入搜索关键词(本站采用sphinx搜索引擎)"
    >
      <template #action>
        <div @click="getSearchData">搜索</div>
      </template>
    </van-search>
    <!-- <van-search v-model="search" placeholder="请输入搜索关键词(本站采用sphinx搜索引擎)" clearable @click-left-icon="getSearchData" /> -->
  </div>
  <!-- body -->
  <!-- <van-pull-refresh v-model="loading" @refresh="onRefresh"> -->
  <div class="body">
    <van-tabs v-model:active="menuActive" animated @click-tab="onClickTab">
      <!-- 全部 -->
      <van-tab title="全部" name="0">
        <div
          class="article"
          v-for="(item, index) in dataList"
          :key="index"
          @click="jumpArticleDetail(item.id)"
        >
          <div class="title" v-html="item.arttitle"></div>
          <div class="desc">
            <div class="left-div">
              <div class="author">{{ item.another }} | {{ item.putime }}</div>
              <div class="desc-show" v-html="item.artdesc"></div>
            </div>
            <div class="right-div">
              <img :src="item.artlogo" style="width: 100%" class="lazyload" />
            </div>
          </div>
          <div class="label">
            <div class="label-left">
              <van-icon name="browsing-history-o" />&nbsp;{{ item.click_num }}
            </div>
            <div class="label-right">
              {{ item.labelStr }}
            </div>
          </div>
        </div>
        <div class="next-page" @click="nextPage" v-if="articlePage > page">
          点击加载下一页
        </div>
      </van-tab>
      <!-- 循环 -->
      <van-tab
        v-for="(it, ind) in categoryList"
        :key="ind"
        :title="it.cat_name"
        :name="it.id"
      >
        <div
          class="article"
          v-for="(item, index) in dataList"
          :key="index"
          @click="jumpArticleDetail(item.id)"
        >
          <div class="title" v-html="item.arttitle"></div>
          <div class="desc">
            <div class="left-div">
              <div class="author">{{ item.another }} | {{ item.putime }}</div>
              <div class="desc-show" v-html="item.artdesc"></div>
            </div>
            <div class="right-div">
              <img :src="item.artlogo" style="width: 100%" class="lazyload" />
            </div>
          </div>
          <div class="label">
            <div class="label-left">
              <van-icon name="browsing-history-o" />&nbsp;{{ item.click_num }}
            </div>
            <div class="label-right">
              {{ item.labelStr }}
            </div>
          </div>
        </div>
        <div class="next-page" @click="nextPage" v-if="articlePage > page">
          点击加载下一页
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <img
    src="https://resource.guanchao.site/uploads/gotop/timg.png"
    class="go_top"
    @click="goToTop"
  />
  <!-- </van-pull-refresh> -->
  <!-- navbar -->
  <div class="footer">
    <!-- <Menu @getIndexDataList="goIndex" ref="MenuRef" /> -->
    <Menu @getIndexDataList="goIndex" ref="MenuRef" activeDefine="0" />
  </div>
</template>
 
<script lang="ts" setup>
// import { ref, onMounted } from "vue";
// 引入子组件
import Menu from "/@/components/phone/Menu.vue";
import {
  // 这里是方法
  goToTop,
  jumpArticleDetail,
  goIndex,
  getSearchData,
  nextPage,
  onClickTab,
  Mounted,
  // 这里是变量
  search,
  page,
  dataList,
  categoryList,
  articlePage,
  loading,
  menuActive,
} from "/@/assets/js/phone/index";
 
// ==================================================================
// 调用生命周期函数
const { MenuRef } = Mounted();
</script>

上方代码，需要注意一下几点：

1：必须在setup下引入子组件：

javascript 复制代码 
// 引入子组件
import Menu from "/@/components/phone/Menu.vue";

2：子组件实例需要在函数中return回来：

scss 复制代码 
// ==================================================================
// 调用生命周期函数
const { MenuRef } = Mounted();

父组件：index.ts

ini 复制代码 
import {
    PropType,
    ref,
    watch,
    reactive,
    toRefs,
    provide,
    inject,
    onBeforeMount, // 在组件挂载之前执行的函数
    onMounted,
    nextTick,
} from "vue";
 
// 引入路由
import router from "/@/router";
// 引入路由
import { useRouter, useRoute } from "vue-router";
// 引入公共js文件
import utils from "/@/assets/js/public/function";
// 引入子组件
import Menu from "/@/components/phone/Menu.vue";
import { common, userinfo } from "/@/hooks/common";
import { Toast } from "vant";
 
// =============================================================================
// 实例化路由
// const router = useRouter();
// const route = useRoute();
 
/**
 * @name: 声明data
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-01-18
 */
const data = reactive({});
 
/**
 * @name: 将data绑定值dataRef
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-01-10
 */
export const {} = toRefs(data);
 
// ===============================================================================
// 子组件相关
/**
 * @name: 定义子组件暴露给父组件的值属性列表
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
interface menuData {
    goIndex: () => void;
    getIndexDataList: () => void;
    homeColor: string;
    otherColor: string;
    placeFileColor: string;
    personalColor: string;
}
// ===============================================================================
// 方法
 
// 页码
export let page = ref<any>(0);
// 子分类id
export let category_id = ref<any>(0);
// 是否请求
export let req = ref<any>(true);
// 文章列表
export let dataList = ref(Array<any>());
// 分类列表
export let categoryList = ref(Array<any>());
// 页码（控制加载下一页是否显示）
export let articlePage = ref(<number>1);
// 下拉刷新标识
export let loading = ref(<boolean>false);
// 搜索值
export let search = ref(<string>"");
// 首页分类菜单默认选中
export let menuActive = ref<number>(0);
// 底部菜单
export let active = ref<number>(0);
// ===============================================================================
// 子组件ref（TypeScript语法）下面这这两种写法也可以，推荐使用Typescript语法
// 子组件menu的对象
export const MenuRef = ref<InstanceType<typeof Menu> & menuData>();
// const MenuRef = ref<InstanceType<typeof Menu>>()
// const MenuRef = ref(null)
/**
 * @name: 调用生命周期onMounted
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2023-01-10
 */
export const Mounted = () => {
    onMounted( async()=>{
        const route = useRoute();
        page.value = route.query.page ?? 1;
        category_id.value = route.query.category_id ?? 0;
        req.value = route.query.req ?? true;
 
        // MenuRef.value = ref<InstanceType<typeof Menu> & menuData>();
        // console.log('获取子组件中的性别', MenuRef.value );
        // console.log('获取子组件中的其他信息', MenuRef.value?.info );
        // console.log('获取子组件中的其他信息', MenuRef.value?.homeColor );
        // 执行子组件方法
        const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value);
        // console.log(dataLists.value.articleShow);
        // console.log(actives.value);
        dataList.value = dataLists.value.articleShow;
        categoryList.value = dataLists.value.cateList;
        articlePage.value = dataLists.value.articlePage;
        active.value = actives.value;
    });
    return {MenuRef};
}
 
/**
 * @name:滚动条回顶部
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const goToTop = () => {
    // 滚动条回顶部
    let json = document.getElementById("body");
    if (json != null)
    {
        json.scrollTop = 0;
    }
};
 
/**
 * @name: 下拉刷新方法
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const onRefresh = async():Promise<void> => {
    let result:any;
    const categoryList = ref(Array<any>());
    const articlePage = ref(Array<any>());
    const active = ref<number>(0);
    // 执行子组件方法
    const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value);
    // console.log(result);
    dataList.value = dataLists.value.articleShow;
    categoryList.value = dataLists.value.cateList;
    articlePage.value = dataLists.value.articlePage;
    active.value = actives.value;
    Toast("刷新成功");
    loading.value = false;
};
 
/**
 * @name: 跳转文章详情页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 * @param:  category_id number  分类
 */
export const jumpArticleDetail = (article_id: Number) => {
    router.push({
        path: "/phone/articleDetail",
        query: {
        article_id: utils.encryptCode({ article_id: article_id }),
        path: "index",
        },
    });
};
 
/**
 * @name: 子组件向父组件抛出的方法
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const goIndex = (response: any): void => {
    try
    {
        page.value = response.page;
        category_id.value = response.category_id;
        if (page.value > 1)
        {
            // 数组合并
            dataList.value.push(...response.articleShow);
        }
        else
        {
            // 数组赋值
            dataList.value = response.articleShow;
        }
        categoryList.value = response.cateList;
        articlePage.value = response.articlePage;
    }
    catch (error)
    {
        console.log("出错了");
    }
};
 
/**
 * @name: 获取搜索数据
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const getSearchData = async():Promise<void> => {
    page.value = 1;
    const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value, search.value, category_id.value);
    dataList.value = dataLists.value.articleShow;
    categoryList.value = dataLists.value.cateList;
    articlePage.value = dataLists.value.articlePage;
    active.value = actives.value;
};
 
/**
 * @name: 加载下一页数据
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const nextPage = async() => {
    page.value += 1;
    // 调用子组件的方法
    const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value, search.value, category_id.value);
    // 循环
    dataLists.value.articleShow.forEach((item:any) => {
        dataList.value.push(item);
    });
    categoryList.value = dataLists.value.cateList;
    articlePage.value = dataLists.value.articlePage;
    active.value = actives.value;
};
 
/**
 * @name: 获取分类下的文章列表
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const onClickTab = async(obj: number) => {
    const categoryList = ref(Array<any>());
    const articlePage = ref(Array<any>());
    const active = ref<number>(0);
    category_id.value = obj;
    page.value = 1;
    // 调用子组件的方法
    const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value, "", category_id.value);
    dataList.value = dataLists.value.articleShow;
    categoryList.value = dataLists.value.cateList;
    articlePage.value = dataLists.value.articlePage;
    active.value = actives.value;
    return {categoryList,articlePage,active};
};
 
/**
 * @name: nextTick 页面发生变化即渲染
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
nextTick(() => {
/*// 获取子组件name
    console.log(MenuRef._value)
    console.log(MenuRef.__v_isRef)
    console.log(MenuRef.__v_isShallow)
    console.log(MenuRef._rawValue)
    console.log(MenuRef.value.count)
    // 加个问号这种写法，没有属性也不会报错
    console.log(MenuRef.value?.homeColor)
    // 执行子组件方法
    MenuRef.value.goIndex()//*/
});

关于上方代码，我们需要注意以下几点：

1：我使用TS来编写程序，先定义了一个接口，确定组件类型：

typescript 复制代码 
/**
 * @name: 定义子组件暴露给父组件的值属性列表
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
interface menuData {
    goIndex: () => void;
    getIndexDataList: () => void;
    homeColor: string;
    otherColor: string;
    placeFileColor: string;
    personalColor: string;
}

2：在生命周期onMounted函数中将子组件实例化的对象返给index.vue文件：

ini 复制代码 
/**
 * @name: 调用生命周期onMounted
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2023-01-10
 */
export const Mounted = () => {
    onMounted( async()=>{
        const route = useRoute();
        page.value = route.query.page ?? 1;
        category_id.value = route.query.category_id ?? 0;
        req.value = route.query.req ?? true;
        // 执行子组件方法
        const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value);
        dataList.value = dataLists.value.articleShow;
        categoryList.value = dataLists.value.cateList;
        articlePage.value = dataLists.value.articlePage;
        active.value = actives.value;
    });
    return {MenuRef};
}

3：同样，在调用子组件的方法的时候，还是需要使用async和await方法的。

ini 复制代码 
/**
 * @name: 下拉刷新方法
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const onRefresh = async():Promise<void> => {
    let result:any;
    // 执行子组件方法
    const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value);
    // console.log(result);
    dataList.value = dataLists.value.articleShow;
    categoryList.value = dataLists.value.cateList;
    articlePage.value = dataLists.value.articlePage;
    active.value = actives.value;
    Toast("刷新成功");
    loading.value = false;
};

到这里，就将上文中的代码分离开了。

有好的建议，请在下方输入你的评论。

相关推荐
吕彬-前端12 分钟前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱14 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai23 分钟前
uniapp
前端·javascript·vue.js·uni-app
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts！从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205872 小时前
web端手机录音
前端
齐 飞2 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解