四、Vue组件化开发学习笔记——父子组件通信,父级向子级传值(props),子级向父级传值(自定义事件),slot插槽
一、父子组件的通信
在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的。
但是,在开发中,往往一些数据确实需要从上层传递到下层:
- 比如在一个页面中,我们从服务器请求到了很多的数据。
- 其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
- 这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。
如何进行父子组件间的通信呢?Vue官方提到
- 通过props向子组件传递数据
- 通过事件向父组件发送消息
在下面的代码中,我直接将Vue实例当做父组件,并且其中包含子组件来简化代码。
真实的开发中,Vue实例和子组件的通信和父组件和子组件的通信过程是一样的。
二、父级向子级传递
2.1、props基本用法
在组件中,使用选项props来声明需要从父级接收到的数据。
props的值有两种方式:
- 方式一:字符串数组,数组中的字符串就是传递时的名称。
- 方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。
我们先来看一个最简单的props传递:
2.2、props数据验证
在前面,我们的props选项是使用一个数组。
我们说过,除了数组之外,我们也可以使用对象,当需要对props进行类型等验证时,就需要对象写法了。
验证都支持哪些数据类型呢?
当我们有自定义构造函数时,验证也支持自定义的类型:
注意:v-bind绑定的属性名称不要使用驼峰写法,vue不支持这种写法,如下图所示:
要想使用驼峰标识,应该把上图中的cInfo
改成c-info
,如下图所示:
三、子级向父级传递
props用于父组件向子组件传递数据,还有一种比较常见的是子组件传递数据或事件到父组件中。
我们应该如何处理呢?这个时候,我们需要使用自定义事件来完成。
什么时候需要自定义事件呢?
- 当子组件需要向父组件传递数据时,就要用到自定义事件了。
- 我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。
自定义事件的流程:
- 在子组件中,通过$emit()来触发事件。
- 在父组件中,通过v-on来监听子组件事件。
我们来看一个简单的例子:
我们来看一个简单的例子:
- 我们之前做过一个两个按钮+1和-1,点击后修改counter。
- 我们整个操作的过程还是在子组件中完成,但是之后的展示交给父组件。
- 这样,我们就需要将子组件中的counter,传给父组件的某个属性,比如total。
四、父子组件的访问
4.1 父子组件的访问方式: $children
有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件。
- 父组件访问子组件:使用
$children
或$refs
reference(引用) - 子组件访问父组件:使用$parent
我们先来看下$children的访问:
- this.$children是一个数组类型,它包含所有子组件对象。
- 我们这里通过一个遍历,取出所有子组件的message状态。
$children
的缺陷: - 通过
$children
访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。 - 但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。
有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用
$refs
$refs
的使用:
$refs
和ref
指令通常是一起使用的。
- 首先,我们通过ref给某一个子组件绑定一个特定的ID。
- 其次,通过this.$refs.ID就可以访问到该组件了。
4.2 父子组件的访问方式: $parent
如果我们想在子组件中直接访问父组件,可以通过$parent
注意事项:
- 尽管在Vue开发中,我们允许通过$parent来访问父组件,但是在真实开发中尽量不要这样做。
- 子组件应该尽量避免直接访问父组件的数据,因为这样耦合度太高了。
- 如果我们将子组件放在另外一个组件之内,很可能该父组件没有对应的属性,往往会引起问题。
- 另外,更不好做的是通过$parent直接修改父组件的状态,那么父组件中的状态将变得飘忽不定,很不利于我的调试和维护。
五、插槽slot
5.1为什么使用slot
slot翻译为插槽: 在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽。
插槽的目的是让我们原来的设备具备更多的扩展性。
比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。
组件的插槽:
- 组件的插槽也是为了让我们封装的组件更加具有扩展性。
- 让使用者可以决定组件内部的一些内容到底展示什么。
栗子:移动网站中的导航栏。
- 移动开发中,几乎每个页面都有导航栏。
- 导航栏我们必然会封装成一个插件,比如nav-bar组件。
- 一旦有了这个组件,我们就可以在多个页面中复用了。
但是,每个页面的导航是一样的吗?No,我以京东M站为例
5.2 如何封装这类组件呢?slot
如何去封装这类的组件呢?
- 它们也很多区别,但是也有很多共性。
- 如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。
- 但是,如果我们封装成一个,好像也不合理:有些左侧是菜单,有些是返回,有些中间是搜索,有些是文字,等等。
如何封装合适呢?抽取共性,保留不同。
- 最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
- 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
- 是搜索框,还是文字,还是菜单。由调用者自己来决定。
这就是为什么我们要学习组件中的插槽slot的原因。
5.3 slot基本使用
了解了为什么用slot,我们再来谈谈如何使用slot?
- 在子组件中,使用特殊的元素就可以为子组件开启一个插槽。
- 该插槽插入什么内容取决于父组件如何使用。
我们通过一个简单的例子,来给子组件定义一个插槽:
<slot>
中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容- 有了这个插槽后,父组件如何使用呢?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--
1.插槽的基本使用 <slot></slot>
2.插槽的默认值 <slot>button</slot>
3.如果有多个值,同时放入到组件进行替换时,一起作为替换元素
-->
<div id="app"><cpn><button>按钮</button></cpn><cpn><span>hhh</span></cpn><hr><cpn><a href="#">百度</a><p>插槽内有多个标签</p></cpn><hr><cpn></cpn><cpn></cpn><cpn></cpn>
</div><template id="cpn"><div><h2>我是组件</h2><slot><button>默认值按钮</button></slot></div>
</template>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn: {template: '#cpn'}}})
</script></body>
</html>
5.4 具名插槽slot
当子组件的功能复杂时,子组件的插槽可能并非是一个。
- 比如我们封装一个导航栏的子组件,可能就需要三个插槽,分别代表左边、中间、右边。
- 那么,外面在给插槽插入内容时,如何区分插入的是哪一个呢?
- 这个时候,我们就需要给插槽起一个名字
如何使用具名插槽呢?
非常简单,只要给slot元素一个name属性即可
<slot name='myslot'></slot>
我们来给出一个案例:
这里我们先不对导航组件做非常复杂的封装,先了解具名插槽的用法。
5.5 编译作用域
在真正学习插槽之前,我们需要先理解一个概念:编译作用域。
官方对于编译的作用域解析比较简单,我们自己来通过一个例子来理解这个概念:
我们来考虑下面的代码是否最终是可以渲染出来的:
<my-cpn v-show="isShow"></my-cpn>
中,我们使用了isShow属性。
isShow属性包含在组件中,也包含在Vue实例中。
答案:最终可以渲染出来,也就是使用的是Vue实例的属性。
为什么呢?
官方给出了一条准则:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
- 而我们在使用的时候,整个组件的使用过程是相当于在父组件中出现的。
那么他的作用域就是父组件,使用的属性也是属于父组件的属性。 - 因此,isShow使用的是Vue实例中的属性,而不是子组件的属性。
5.6 作用域插槽
作用域插槽是slot一个比较难理解的点,而且官方文档说的又有点不清晰。
这里,我们用一句话对其做一个总结,然后我们在后续的案例中来体会:
父组件替换插槽的标签,但是内容由子组件来提供。
我们先提一个需求:
子组件中包括一组数据,比如:pLanguages: [‘JavaScript’, ‘Python’, ‘Swift’, ‘Go’, ‘C++’]
需要在多个界面进行展示:
- 某些界面是以水平方向一一展示的,
- 某些界面是以列表形式展示的,
- 某些界面直接展示一个数组
内容在子组件,希望父组件告诉我们如何展示,怎么办呢?
利用slot作用域插槽就可以了
我们来看看子组件的定义:
在父组件使用我们的子组件时,从子组件中拿到数据:
- 我们通过
<template slot-scope="slotProps">
获取到slotProps属性 - 在通过slotProps.data就可以获取到刚才我们传入的data了
四、Vue组件化开发学习笔记——父子组件通信,父级向子级传值(props),子级向父级传值(自定义事件),slot插槽相关推荐
- 三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
- Vue.js-Day02-PM【组件化开发(全局注册组件、局部注册组件、案例)、组件的配置选项、轮播图实例(左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止)】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目 录 4.组件化开发 4.1.组件的注册 全局注册 局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
- Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用
Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用 按照官网教程学习使用组件,并且重点把容器组件的应用进行了练习. 1.官网关于组件的介绍 组件是视图层的基本组成单元,是一个单独且可复用的 ...
- 组件化开发之如何封装组件
自从React,Vue等前端框架在市面上大量使用之后,组件化开发逐渐成为了前端主流开发方式,今天我就在这里给大家分享一下在我们平时的开发中我们自己应该如何去封装组件.主要从以下三个方面给大家讲解: 什 ...
- 我的react组件化开发道路(二) 分页 组件开发
2019独角兽企业重金招聘Python工程师标准>>> 上一篇文章主要写了关于react组件化开发的一些基本配置,慢慢的深入到每个组件的详细介绍中,今天我们就来分享react的分页组 ...
- Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
- Vue全家桶之组件化开发
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 学习组件化开发,首先掌握组件化的开发思想,组件的注册方式,组件间的数 ...
- Vue.js教程-组件化开发
Vue.js教程-组件化开发 前言 Vue组件化 什么是组件化 Vue单页面开发的解释 组件化思想 组件的使用 原理 实际开发中的使用-父子组件 父子组件传递数据 父传子-props用法 子传父-th ...
- Vue组件化开发 - 非常详细,不要错过哦~
源码示例链接:https://pan.baidu.com/s/1NEYDmLl2K7nNa-AKWtJqVA 提取码:2c7a 目标 能够知道组件化开发思想 能够知道组件的注册方式 能够说出组件间的数 ...
最新文章
- linux用两种方法找到cuond,很基础的Linuxshell脚本学习.doc
- 2019浙江省大学生网络与信息安全竞赛决赛部分WriteUp
- 《Windows via C/C++》学习笔记 —— “线程同步”之“检测死锁”
- JavaFX技巧32:需要图标吗? 使用Ikonli!
- React开发(126):ant design学习指南之form中的自定义校验labelCol
- 动作定位、检测与理解,ICCV 2021 DeeperAction挑战赛开启~
- 001_深度剖析什么是 SLI、SLO和SLA?
- 【Oracle学习笔记】索引
- 尚硅谷大数据项目之Flink实时数仓-踩坑记录和笔记记录
- bert模型使用记录
- C++ 打印机状态查询之SNMP协议
- neu1482 2014辽宁省赛Picking Cabbage(状态压缩)
- MinIO的简单实用(一)
- Dynamo For Revit: List 连缀 和 Level
- python中%s和%r的区别
- Ubuntu 安装sogo 输入法
- JDK1.8之Lambada表达式一
- zr 10联测 day1
- 这篇讲MySQL海量数据分库分表的,实在太过瘾了!
- git-rebasegit-squash
热门文章
- 路由到另外一个页面_Nextjs使用解读一(项目搭建与路由系统)
- python rowcount_PyQt(Python+Qt)学习随笔:QTableWidget的currentItem、rowCount、columnCount等部件状态属性访问方法...
- 简单绘图软件实现mfc大作业_纸笔书写|可直播可微课可写作业可批改的手写板,快来爱“我”吧...
- ubuntu之ufw防火墙
- 【机器学习】XGBoost集成算法——(理论+图解+python代码比较其他算法使用天池蒸汽数据)
- MapReduce原理全剖析
- 米家对讲机_对前面两代产品不断总结和完善的产物,米家对讲机2代开箱体验...
- php_flag .htaccess,Apache服务器中.htaccess文件的实用配置示例集锦
- Linux下精准踢掉登录用户-pkill命令
- Service Worker,Web Worker,WebSocket的对比