Vue3学习笔记-组件化 - 组件间通信

已于 2022-10-01 09:20:41 修改
阅读量592 收藏
点赞数 1
分类专栏： 前端 文章标签： 前端 javascript 学习 vue.js html
于 2022-09-30 19:59:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62602850/article/details/127128483
版权

认识组件的嵌套

如果我们一个应用程序将所有的逻辑都放在一个组件中 那么这个组件就会变得非常臃肿难以维护

所以组件化的核心思想是对组件进行拆分 拆分成 一个个小的组件

再将这些组件组合嵌套在一起 最终形成 我们的应用程序

组件的拆分

我们可以按照如下的方式进行拆分:

 

按照上面的拆分方式后,我们开发对应的逻辑只需要去对应的组件编写即可.

组件的通信

上面的嵌套逻辑如下:存在如下关系:

App组件是Header Main Footer组件的父组件

Main组件是Banner ProductList组件的父组件

在开发过程中 经常遇到需要组件之间相互进行通信:

如 App可能使用了多个 Header 每个地方的Header展示的内容不同 就需要使用者传递给Header一些数据来进行展示

我们在Main中一次性 请求了Banner数据和ProductList数据,那么就需要传递给它们来进行展示

也可能是子组件中发生了事件 需要由父组件来完成某些操作 就需要子组件向父组件传递事件

2 父组件传递子组件

父子组件之间通信的方式

父子组件之间如何进行通信呢?

父组件传递给子组件:通过props属性

子组件传递给父组件:通过$emit触发事件

最低0.47元/天 解锁文章
「已注销」
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue脚手架,vue3 组件 vue-property-decorator 组件
09-11
vue脚手架 本框架已开发了所属相关组件，如有 定制组件 需求可联系
vue中使用v-model完成组件间的通信
10-16
vue中有一个很神奇的东西叫v-model，它可以完成我们的需求。，本文重点给大家介绍vue中使用v-model完成组件间的通信,需要的朋友可以参考下
Vue3----props和emit的使用
测试
12-20 8887
props和emit
Vue3父子组件emit参数传递（解决Vue2this.$emit无效问题）
韦_恩的博客
01-30 2万+
之前写了一篇Vue3路由跳转问题的博客，发现还是有很多同学对基本的使用改变还没有了解，于是我就顺道把常用的组件间传递的方式也写一下吧....... 注意的是： 1.Vue3中不在强调this的使用，可以说你在setup中完全不能用this，不像Vue2中把全部的内容都集成到this中。 2.Vue3现在由于compositionAPI的方式可以说是弱化了Vuex的存在（当然Vuex现在可以用没什么变化）。 3.如果您有Vue2的开发经历，用Vue3也不会特别陌生，会很快上手。 目录 1.解决.
详细分析Vue3中的emit用法（子传父）
最新发布
码农研究僧的博客
05-16 3321
在 Vue 3 中，emit 是一种机制，用于在子组件中触发事件，并在父组件中监听这些事件 提供一种组件间通信的方式，尤其是在处理父子组件数据传递和交互时非常有用
走进Vue【二】Vue3语法糖
商务合作/软件定制/学习交流
03-16 937
Vue3的语法糖
Vue3里通过defineProps和defineEmits两个宏函数进行父子组件传递数据
qq_37635012的博客
10-09 5323
vue3父子组件通信，vue3里props使用，vue3里emit使用
Vue组件间通信-Vuex
10-16
主要介绍了Vue组件间通信-Vuex,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue-notification:使用Vue3的NotificationToast组件
03-28
@ dafcoe / vue-notification 使用Vue3构建的易于使用，可自定义的通知/吐司库。 在页面上查看操作。安装使用yarn或npm将软件包安装为项目依赖项： $ yarn add @dafcoe/vue-notification--- or ---$ npm install --...
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
vue-cron表达式组件
【vue3】vue3 setup如何使用emit？
热门推荐
qq_39576711的博客
03-14 3万+
setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。 他接受两个参数： {Data} props {SetupContext} context emit就是第二个参数的一个属性： 下面看一下用例，子组件 renderTest.vue： <script lang="ts"> import { h } from "vue" interface Data { [key: string]: unknown } interface SetupConte
vue3 事件 emit 使用
qq_38946996的博客
11-28 3996
vue3 事件 emit 使用
vue：vue中子组件使用$emit传值的种种情况
m0_64401231的博客
10-15 1279
vue中子组件使用$emit传值的种种情况
组件传值（props、$emit）
weixin_46118496的博客
04-07 223
父子组件传值Ⅰ 我们正常情况下是这样的 <seed /> <!-- 子组件 --> import seed from './components/seed.vue' //子组件的路径 components: { seed }, 很多情况下都用到了传值，但是有很多方法都不正确，会出现一些问题，下边是我用的方法，希望对大家有用处。父向子组件传值，使用方法props 父： <seed :seedType="seedType" /> import seed f
vue中this.$emit的用法
weixin_45650737的博客
03-16 2056
转自https://www.cnblogs.com/shenStudy/p/15327718.html vue中this.$emit的用法 用于当子组件需要调用父组件的方法的场景下使用。与之相对的当父组件需要调用子组件时则使用this.$refs的方法 实例 为了能清晰的了解具体用法，准备了一个父子组件互调方法的例子。父组件 父组件调用子组件需要导入子组件的路径并添加组件之后添加子组件标签即可。 子组件 子组件在调用父组件是需要在父组件中添加事件来触发父组件的方法。
VUE3_组件间传值的三种方法_setup语法糖_记录
weixin_45039579的博客
04-04 1万+
前言 记录下Vue3中setup语法糖集成到script标签后父子组件的传值方法。 一、父传子 父组件 //通过动态绑定的方式 <template> <div> <button>父组件</button> <Child :sex="sex" @FatherMethod"></Child> </div> <template> <script setup lang="ts"> //引入子组
Vue3组件间的传值案例（props，emit，ref，attrs，inject在setup script标签两个场景中的使用）
qq_54334713的博客
10-06 2767
整理了，Vue3传值过程中，props，emit，ref，attrs，inject在setup script 标签中和不在setup script 标签中的案例
vue3-virtual-scroller组件的安装
04-28
vue3-virtual-scroller是一个用于Vue.js 3的虚拟滚动组件，它可以提高大型列表的性能和渲染效率。要安装vue3-virtual-scroller组件，您可以按照以下步骤进行操作： 1. 首先，确保您已经在项目中安装了Vue.js 3。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值