2021-10-10 vue笔记-组件化开发(二) 组件通信:父传子,子传父

2023-10-16 22:32

本文主要是介绍2021-10-10 vue笔记-组件化开发(二) 组件通信:父传子,子传父,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

        • 0.组件间传值(组件通信)纲要
          • 为什么要组建通信
          • 组件通信的分类
            • 父子组件通信
            • 非父子组件通信又分为兄弟组件、隔代关系组件等
            • eventBus使用步骤:
        • 1.父传子
          • 步骤
          • props
          • 例子:父(root)=>子(navbar)
            • 代码
            • 结果
          • 总结
        • 2.使用props属性的对象写法来进行属性验证
          • 示例:接上例,其他代码不变
        • 3.子传父
          • 步骤
          • $emit()
          • 子传父例子一:点击button,p标签字体变大
          • 子传父例子二:(实际应用)点击实现侧边栏的显示和隐藏
          • 总结

0.组件间传值(组件通信)纲要
为什么要组建通信

每个组件之间具有一定的独立性,
但是在实际工作中使用组件的时候有互相之间传递数据的需求,
此时就得考虑进行组件间传值

组件通信的分类

组件通信分为 2 种:父子组件之间的通信、非父子组件之间的通信;

父子组件通信

父组件通过props向子组件传值,
子组件通过$emit将数据发送给父组件;

非父子组件通信又分为兄弟组件、隔代关系组件等
  • 通信方式一:事件总线
通过eventBus(事件总线)实现跨组件传输,
原理:将eventBus作为连接组件之间的桥梁,
所有组件共用相同的事件中心,
向事件中心发送或接收事件,并可以通知其他组件;
eventBus使用步骤:

1、初始化,创建一个事件总线并导出,以便其他模块可以使用并监听它;

// eventBus.js
import Vue from 'vue'
//通过一个空的Vue实例作为中央事件总线(事件中心)
export const EventBus = new Vue() 

2、导入eventBus,使用$emit发送数据;
3、导入$on,使用$on接收数据;
4、如果想移除事件,可以先导入eventBus,通过$off移除;(eventBus.$off ( 'add', {} ))

  • 通信方式二:ref 和 $refs;
如果 ref 在普通DOM上,那么它的引用指向的就是DOM元素;
如果用到子组件上,那么它的引用就指向组件实例,
可以通过实例直接调用组件上的方法和数据
1.父传子
步骤

父组件以自定义属性的形式绑定值到子组件身上
子组件通过使用属性props接收

props
  • props是单向绑定的(只读属性)
    当父组件的属性变化时,将传导给子组件,但是反过来不会
  • 父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明"props"
  • props属性支持两种常见的写法形式
1.数组(推荐):书写简单,不能设置默认值、数据类型
2.对象:写法复杂,可以设置数据默认值与数据类型
例子:父(root)=>子(navbar)
代码
<body><div id="app"><!-- myname是自定义属性(不能用驼峰命名法) --><navbar myname="home" v-bind:myshow="true"></navbar><!-- 使用v-bind动态绑定属性(简写为一个冒号) --><navbar myname="login" :myshow="true"></navbar><navbar myname="list" :myshow="false"></navbar><navbar :myname="parentpath" :myshow="true"></navbar></div>
</body>
<script>Vue.component('navbar', {// 调用自定义属性myname和myshowtemplate: `<div>返回{{myname}}页:<span v-show="myshow">显示</span></div>`,// 接收父组件传来的属性(数组)props: ["myname", "myshow"]})new Vue({el: "#app",data: {// 父组件root的属性parentpath: "user"}})
</script>
结果

返回home页:显示
返回login页:显示
返回list页:
返回user页:

总结
1.此处的父组件是指系统默认的根组件root
2.在子组件navbar中,使用props接收父组件传来的属性构成的对象,
该属性已在navbar的调用中,定义成自定义属性
3.动态绑定可以让自定义属性中的值不被看成是字符串,而是js的语法内容
4.props写在template后面而不是{}外面
2.使用props属性的对象写法来进行属性验证
示例:接上例,其他代码不变
  // 接收父组件传来的属性(数组)// props: ["myname", "myshow"]// 接收父组件传来的属性,并验证(对象)props: {myname: String,myshow: Boolean}
3.子传父
步骤
  • 子组件模版内容中.用 $emit() 定义自定义事件
  • 父组件模板内容中.子组件占位标签上.用v-on(或@)绑定子组件定义的自定义事件名,监听子组件的事件来实现通信
$emit()

$emit() 方法有2个参数:

第一个参数为自定义的事件名称
第二个参数为需要传递的数据(可选)
子传父例子一:点击button,p标签字体变大
<body><div id="app"><!-- step2:父组件模板内容中.子组件占位标签上.用v-on绑定子组件定义的自定义事件名myclick --><!-- bigger不用带括号 --><child @myclick="bigger"></child><p :style="{fontSize:fontSize+'px'}">hello</p></div>
</body>
<script>Vue.component("child", {//step1:子组件模版内容中.用 $emit() 定义自定义事件myclick //$emit()的两个参数:自定义的事件名称 需要传递的数据template: `<button @click="$emit('myclick',10)">点击</button>`});new Vue({el: "#app",data: {fontSize: 12},methods: {bigger: function(n) {this.fontSize += n//效果:点击button,p标签字体变大}}})
</script>
子传父例子二:(实际应用)点击实现侧边栏的显示和隐藏
<body><div id="app"><navbar @myclick="handleEvent"></navbar><sidebar v-show="isShow"></sidebar></div>
</body>
<script>Vue.component('navbar', {// template: `<button @click="$emit('myclick')">点击</button>`,,与下面代码效果一样template: `<button @click="handleClick">点击</button>`,methods: {handleClick() {this.$emit("myclick");}}});Vue.component('sidebar', {template: `<ul><li>111</li><li>222</li><li>333</li></ul>`});new Vue({el: "#app",data: {isShow: false},methods: {handleEvent: function() {this.isShow = !this.isShow;}}})
</script>
总结
1.父传子是用属性向下传,子传父是用事件向上传
2.子传父的步骤:step1:在父组件模板内容的子组件占位符<child>上使用@绑定子组件自定义事件名step2:在子组件模板内容的template``,使用$emit()定义自定义事件

这篇关于2021-10-10 vue笔记-组件化开发(二) 组件通信:父传子,子传父的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/221205

相关文章

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

使用Python开发一个图像标注与OCR识别工具

《使用Python开发一个图像标注与OCR识别工具》:本文主要介绍一个使用Python开发的工具,允许用户在图像上进行矩形标注,使用OCR对标注区域进行文本识别,并将结果保存为Excel文件,感兴... 目录项目简介1. 图像加载与显示2. 矩形标注3. OCR识别4. 标注的保存与加载5. 裁剪与重置图像

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态