广东建设工程监理检测协会网站,免费企业邮箱如何申请,湖北省建设主管部门网站,万网 做网站Vue组件间通信实践
#x1f31f; 前言 欢迎来到我的小天地#xff0c;这里是我记录技术点滴、分享学习心得的地方。#x1f4da; #x1f6e0;️ 技能清单 编程语言#xff1a;Java、C、C、Python、Go、前端技术#xff1a;Jquery、Vue.js、React、uni-app、EchartsUI设…Vue组件间通信实践 前言 欢迎来到我的小天地这里是我记录技术点滴、分享学习心得的地方。 ️ 技能清单 编程语言Java、C、C、Python、Go、前端技术Jquery、Vue.js、React、uni-app、EchartsUI设计: Element-ui、Antd、Color-ui后端技术Spring Boot、Mybatis-plus、Swagger移动开发Android操作系统Windows、Linux开发框架RuoYi、微信小程序开发工具VSCode、IDEA、Eclipse、WebStorm、HbuildX、Navicat、Xshell、Android Studio、Postman数据库技术MySQL、Redis、SQL Server版本控制Git 在Vue中组件间的通信是构建复杂应用的关键。本教程将通过几个简单的例子来展示如何在Vue组件之间传递数据和方法。
defineProps和defineEmits的作用
在Vue 3中defineProps和defineEmits是Composition API的一部分它们用于在组件中声明props接收来自父组件的数据和emits触发事件传递给父组件。
defineProps
defineProps用于声明组件接收的props。它允许你定义一个接口指定哪些属性将作为props传递给组件。这有助于提供类型检查和自动完成功能使得组件的props使用更加清晰和安全。
import { defineProps } from vue;const props defineProps({// 定义一个名为 message 的 prop类型为 Stringmessage: String,// 定义一个名为 age 的 prop类型为 Number可选默认值为 18age: {type: Number,default: 18},// 定义一个名为 isStudent 的 prop类型为 BooleanisStudent: Boolean
});在上面的例子中props是一个响应式引用你可以在组件的其他地方使用它来访问这些props。
defineEmits
defineEmits用于声明组件可以触发的事件emits。这允许你在组件内部定义可以被父组件监听的事件。与defineProps类似它也提供了类型检查和自动完成的功能。
import { defineEmits } from vue;const emits defineEmits({// 定义一个名为 update:name 的事件// 当这个事件被触发时它将传递一个名为 name 的参数update:name: (name: string) true,// 定义一个名为 delete 的事件没有参数delete: () true
});在上面的例子中emits是一个对象它描述了组件可以触发的事件。你可以在组件内部使用emits来触发这些事件。
父子组件通信
父组件传递数据和方法给子组件
在父组件中我们定义了一些数据和方法并通过props传递给子组件。
templatedivdiv clickprops.viewFun***main组件***/divhello-world:fuDatafuData:fuFuncfuFuncchild-eventreceiveCh/hello-world/div
/templatescript setup langts
import HelloWorld from /components/HelloWorld.vue;// 定义数据和方法
const fuData main数据;
const fuFunc (i: any) {console.log(main组件的方法, i);
};// 子组件触发的事件处理
const receiveCh () {console.log(main组件的方法被调用了);
};// 使用defineProps定义props
import { defineProps } from vue;
const props defineProps([viewFun]);
/script子组件调用父组件的方法
在子组件中我们可以通过emit来触发父组件的方法。
templatediv clickchFunc---hello组件---/divdiv clickfuFunc(111){{ fuData }}/divdiv{{ viewData }}/div
/templatescript setup langts
// 使用defineProps接收父组件传递的数据和方法
import { defineProps } from vue;
interface Props {fuData?: String;fuFunc?: Function | any;
}
definePropsProps();// 使用defineEmits定义子组件触发的事件
import { defineEmits } from vue;
const emit defineEmits([child-event]);
const chFunc (data: any) {emit(child-event, data);
};// 使用inject接收父组件通过provide注入的数据
import { inject, Ref, ref } from vue;
const viewData injectRefnumber(view, ref(0));
/script跨层级组件通信
使用provide/inject
在Vue 3中我们可以使用provide和inject来实现跨层级组件的通信。
templatedivdiv页面/divmain-layout :view-funviewFun/main-layout/div
/templatescript setup langts
import MainLayout from /components/MainLayout.vue;// 在父组件中provide数据
import { provide } from vue;
provide(view, provide注入数据);// 在子组件中inject数据
const viewFun () {console.log(页面加载);
};
/script联系方式
如果您对我们的项目感兴趣或者有任何技术问题想要探讨欢迎通过以下方式与我联系。我非常期待与您交流共同学习共同进步
邮箱2109664977qq.comGitee我的GiteeGitHub我的GitHubCSDN我的CSDN个人博客访问我的博客 结语
感谢你的访问如果你对我的技术文章或项目感兴趣欢迎通过以上方式与我联系。让我们一起在技术的道路上不断前行
