AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-12-14 188
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： VUE3（三十八）Vue3.2子父组件交互（vue、ts分离）

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

 


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


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


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


Menu.vue


<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


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


<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下引入子组件：


// 引入子组件
import Menu from "/@/components/phone/Menu.vue";


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


// ==================================================================
// 调用生命周期函数
const { MenuRef } = Mounted();

 


父组件：index.ts

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来编写程序，先定义了一个接口，确定组件类型：


/**
 * @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文件：


/**
 * @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方法的。


/**
 * @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;
};

 


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

 


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


文章标签：
JavaScript
前端开发
数据库
关键词：
ts VUE.js
vue3 ts VUE.js
vue3 vue VUE.js
vue ts VUE.js
VUE.js父组件
camellia。
目录
相关文章
人间真情在哪儿
|
3天前
|
JavaScript
vue消息订阅与发布
vue消息订阅与发布
人间真情在哪儿
108 59
刘大猫.
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】
刘大猫.
12 4
刘大猫.
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【51.路由懒加载】
vue尚品汇商城项目-day07【51.路由懒加载】
刘大猫.
12 4
刘大猫.
|
3天前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-54.（了解）生成二维码插件】
vue尚品汇商城项目-day07【vue插件-54.（了解）生成二维码插件】
刘大猫.
8 2
杀死一只知更鸟debug
|
5天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用，包括单个插槽和多个具名插槽的定义及在父组件中的使用方法，展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
杀死一只知更鸟debug
14 1
游客qeoynko2nmbgk
|
4天前
|
JavaScript 前端开发 IDE
Vue学习笔记5：用Vue的事件监听 实现数据更新的实时视图显示
Vue学习笔记5：用Vue的事件监听 实现数据更新的实时视图显示
游客qeoynko2nmbgk
21 7
游客qeoynko2nmbgk
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记4：用reactive() 实现数据更新的实时视图显示
Vue学习笔记4：用reactive() 实现数据更新的实时视图显示
游客qeoynko2nmbgk
22 5
游客qeoynko2nmbgk
|
4天前
|
JavaScript 前端开发
Vue学习笔记8：解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8：解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
游客qeoynko2nmbgk
13 5
游客qeoynko2nmbgk
|
4天前
|
JavaScript 前端开发 API
Vue学习笔记7：使用v-for指令渲染列表
Vue学习笔记7：使用v-for指令渲染列表
游客qeoynko2nmbgk
11 3
人间真情在哪儿
|
4天前
|
JavaScript
vue 函数化组件
vue 函数化组件
人间真情在哪儿
13 1

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VUE element-ui之form表单中input输入超过规定长度error提醒，并实时显示输入长度，可无限输入
  • 3
    【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源
  • 4
    基于Vue和SpringBoot的电商管理系统的设计与实现（一）
  • 5
    前端vue给后端list集合对象传值
  • 6
    VUE组件：如何在Vue中实现组件的动态引入？
  • 7
    Vue3 自定义指令实现元素点击的节流与输入框的防抖,后端老哥再也不用担心我频繁发送请求了
  • 8
    Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
  • 9
    vue后台管理系统小功能
  • 10
    Vue —— 基础（二）（计算属性、监听属性）
  • 1
    【vue的技术要点】
    78
  • 2
    【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
    394
  • 3
    在vue中，在哪个生命周期内调用异步请求？
    251
  • 4
    在vue中，Vue 的父组件和子组件生命周期钩子函数执行顺序？
    64
  • 5
    在vue中，直接给一个数组项赋值，Vue 能检测到变化吗？
    206
  • 6
    在vue中，computed 和 watch 的区别和运用的场景？
    64
  • 7
    在vue中，怎样理解 Vue 的单向数据流？
    60
  • 8
    在vue中，Class 与 Style 如何动态绑定？
    44
  • 9
    在vue中，v-show 与 v-if 有什么区别？
    40
  • 10
    在vue中，如何实现SPA单页面应用的路由管理？
    58

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    无影云桌面