vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)

简介: vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件

vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)https://developer.aliyun.com/article/1492684


💖 子组件传递事件给父组件使用emit

子组件

<template>
  <div class="iframe-container">
    <div class="iframe-content" v-if="!isPage&&!isModel">
      <div style="width: 100%">
        <span> 标题:{{ title }} </span>
        {{kind}}
        <a-button
          @click="jumpPage"
          type="primary"
          style="float: right; margin: 5px"
        >
          跳转</a-button
        >
      </div>
      <iframe :src="url" class="iframe-box"></iframe>
    </div>
    <div class="iframe-content" v-else-if="!isModel">
      <UserTable></UserTable>
    </div>
    <div class="iframe-content" v-else>
      <ChatTable></ChatTable>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {computed} from 'vue'
// @ts-ignore
const props = defineProps<{
  url: string;
  title: string;
  kind: string;
}>();
const isPage=computed(()=>{
  console.log('props',props)
  return props.kind=='page'
})
const isModel=computed(()=>{
  console.log('props',props)
  return props.kind=='model'
})
const emit = defineEmits<{
  (e: "change", id: number): void;
  (e: "update", value: string): void;
}>();
const jumpPage = () => {
  window.open(props.url);
};
</script>

父组件通过@绑定事件change和update就能接受子组件触发的change和update事件

💖 父组件获取子组件实例使用Ref

通过使用ref绑定formRef去获取校验事件

<template>
  <div class="container">
    <div class="loginUser-container">
      <div class="loginUser-title">管理平台</div>
      <a-form
        :model="state.formState"
        :label-col="state.layoutConfig.labelCol"
        :wrapper-col="state.layoutConfig.wrapperCol"
        :rules="state.formRule"
        ref="formRef"
        layout="vertical"
        autocomplete="off"
      >
        <a-form-item label="账号" name="username">
          <a-input
            v-model:value="state.formState.username"
            allowClear
            placeholder="请输入账号"
            :disabled="state.spinning"
          />
        </a-form-item>
        <a-form-item label="密码" name="password">
          <a-input-password
            v-model:value="state.formState.password"
            :disabled="state.spinning"
            allowClear
            placeholder="请输入密码"
          />
        </a-form-item>
        <a-form-item name="remember" :wrapper-col="state.wrapperCol">
          <a-checkbox
            v-model:checked="state.formState.remember"
            :disabled="state.spinning"
            >记住密码</a-checkbox
          >
        </a-form-item>
        <a-form-item :wrapper-col="state.submitWrapperCol" class="submit-box">
          <a-button
            type="primary"
            html-type="submit"
            @click="loginAction"
            :loading="state.spinning"
            style="width: 100%; font-size: 16px; font-weight: bolder"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
      <div class="description">
        <span class="description-prefix">没账号?</span>
        <span
          @click="jumpRegister"
          class="description-after"
          :disabled="state.spinning"
          >去注册</span
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
import { loginUser } from "../../service/user/userApi";
import type { FormInstance } from "ant-design-vue";
interface FormStateType {
  username: string;
  password: string;
  remember: boolean;
}
interface FormRuleType {
  username: Object;
  password: Object;
}
interface stateType {
  formState: FormStateType;
  formRule: FormRuleType;
  layoutConfig: any;
  wrapperCol: any;
  submitWrapperCol: any;
  spinning: boolean;
  backgroundImgUrl: string;
}
// 路由
const router = useRouter();
//store
const store = useStore();
const formRef = ref<FormInstance>();
const state: stateType = reactive({
  formState: {
    username: "",
    password: "",
    remember: false,
  },
  spinning: false,
  formRule: {
    username: [{ required: true, message: "请输入账号!" }],
    password: [{ required: true, message: "请输入密码!" }],
  },
  layoutConfig: {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 24,
    },
  },
  wrapperCol: { offset: 0, span: 24 },
  submitWrapperCol: { offset: 0, span: 24 },
  backgroundImgUrl:
    "http://www.yongma16.xyz/staticFile/common/img/background.png",
});
/**
 * 初始化表单内容
 */
const initForm = () => {
  const userInfoItem: any = window.localStorage.getItem("userInfo");
  interface userInfoType {
    username: string;
    password: string;
    remember: boolean;
  }
  const userInfo: userInfoType = userInfoItem
    ? JSON.parse(userInfoItem)
    : {
        username: "",
        password: "",
        remember: false,
      };
  if (userInfo.username && userInfo.password) {
    state.formState.username = userInfo.username;
    state.formState.password = userInfo.password;
    state.formState.remember = userInfo.remember;
  }
};
/**
 * 前往注册!
 */
const jumpRegister = () => {
  // 带 hash,结果是 /about#team
  router.push({ path: "/register" });
};
/**
 * 前往home!
 */
const jumpHome = () => {
  // 带 hash,结果是 /about#team
  router.push({ path: "/" });
};
/**
 * 记住密码
 * @param params
 */
const rememberAction = (params: Object) => {
  window.localStorage.setItem("userInfo", JSON.stringify(params));
};
/**
 * 登录
 */
const loginAction = () => {
  if (formRef.value) {
    formRef.value.validate().then(async (res: any) => {
      state.spinning = true;
      const params = {
        username: state.formState.username,
        password: state.formState.password,
      };
      if (state.formState.remember) {
        rememberAction({ ...params, remember: state.formState.remember });
      }
      try {
        console.log('登录',params)
        // @ts-ignore
        await store.dispatch(
          "user/loginUser",
          params
        );
        // 跳转
        setTimeout(() => {
          jumpHome();
        }, 500);
        state.spinning = false;
      } catch (r: any) {
        message.error(JSON.stringify(r));
        state.spinning = false;
        throw Error(r);
      }
    });
  }
};
onMounted(() => {
  //初始化
  initForm();
});
</script>

⭐总结

综合比较react和vue,对于选型我分成两种情况讨论。

  1. vue项目选型——vue3 vben admin
    a. 外包项目(可维护性强,中文文档多,容错率高)
    b. 国内开发者众多的团队,因为vue中文文档比较多
    c. 使用vue较多的团队,适合快速上手
  2. react项目——qiankun
    a. 自研大型项目(个人觉得react项目不好抄袭)
    b. 外企团队,因为react的文档大部分都是英文
    c. 使用react较多的团队,适合快速上手

个人比较看好vue,有以下3点。

a. 国内开发人数众多,搭建可以用中文在社区交流vue3,扩大国内开发影响力

b. vue3的组件传值等我都比react好用,react用的费劲

c. vue的生态良好,版本也一直在迭代更新

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!

目录
相关文章
|
5天前
|
前端开发 JavaScript 测试技术
React 分页组件 Pagination
本文介绍了如何在 React 中从零构建分页组件,涵盖基础概念、常见问题及解决方案。通过示例代码详细讲解了分页按钮的创建、分页按钮过多、初始加载慢、状态管理混乱等常见问题的解决方法,以及如何避免边界条件、性能优化和用户反馈等方面的易错点。旨在帮助开发者更好地理解和掌握 React 分页组件的开发技巧,提升应用的性能和用户体验。
24 0
|
9天前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法,包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点,帮助开发者更好地理解和应用拖拽功能。
31 9
|
4天前
|
前端开发 UED 开发者
React 分页组件 Pagination
本文介绍了如何在 React 中实现分页组件,从基础概念到常见问题及解决方案。分页组件用于将大量数据分成多个页面,提升用户体验。文章详细讲解了分页组件的基本结构、快速入门步骤、以及如何处理页面跳转不平滑、页码过多导致布局混乱、边界条件处理和数据加载延迟等问题。通过本文,读者可以全面了解并掌握 React 分页组件的开发技巧。
8 2
|
8天前
|
设计模式 前端开发 编译器
与普通组件相比,React 泛型组件有哪些优势?
与普通组件相比,React 泛型组件有哪些优势?
22 6
|
16天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
33 2
|
22天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
22天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
10天前
|
前端开发 UED
React 模态框 Modal 组件详解
【10月更文挑战第27天】本文介绍了如何在 React 中实现一个功能完善的模态框组件。从基础概念入手,逐步讲解了简单的模态框实现、CSS 样式、传递子组件、键盘事件处理等高级功能。同时,还探讨了常见问题及易错点,如背景点击关闭、键盘事件冲突和动画效果。通过本文,读者可以全面了解 React 模态框组件的实现细节。
23 0
|
10天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
36 9
|
1月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。