甚麽是Vue组件,为甚麽采用组件化?
我想,如果您已经接触过一些Vue组件化开发的基础知识,您便可以略过这段了。
关于Vue组件:在开发过程中,如果把需要重复使用的一段框架封装起来,并且能在后面的使用中以极其简便的方式调用(自然是极少能遇到需要框架内容完全相同的情况,后面会有slot插槽的方法来改动需要变化的地方)一定会很方便,于是产生了“Vue组件”这一概念。听到上面说的Vue组件的用法,您会觉得它很像一种“模板”?其实Vue组件的构成中最重要的一部分就是模板属性“template”,它支持您在Vue组件模板对象中书写您需要的框架。
关于组件化开发:其实组件的优点应该放在这里一并说,组件这一概念诞生后,服务器的压力相比以前已经有所改善,但是明显是仍有改进空间的:每个组件都要请求一份属于自己的数据,在数据更新后还要再次请求,出现事件要反馈…… 解决这个问题的途径便是将页面分割为一个个大组件,其内部装载各种子组件,如此一来,大组件只要在请求数据时把子组件的数据也都请求回来等着子组件调用即可,这就缩减了请求总次数。
一、在Vue组件间传输数据的目的
前面说到父组件会在请求数据时顺带把子组件的数据也请求回来等待调用,那么既然子组件要调用,也就需要在Vue组件层面进行数据传输,子组件在自身事件触发后也要向服务器提交报告(内部包含触发的事件和触发事件的数据位置),这一过程也要经过父组件。
二、子级组件调用父级数据?
也就是“父传子”,需要借助一个存在于Vue组件对象中的属性:props;这个属性会从自己所在的组件向上查找最近的父级元素,并且以数组形式返回父元素data(不是组件模板对象里的函数型data)中的数据。props可以是数组型,亦可以是对象型。
数组型props
props属性类型是一个数组,数组的每个元素都是一个props变量,但是是空值,要为其赋值,您需要在HTML部分中为每个prop变量指定一个摄取目标,其会从分配给自己的目标中摄取值来赋给自己,这个摄取目标可以是其他的props变量(摄取prop值),也可以是data中的属性名(摄取属性值)。
这里我引用一个栗子,把Vue实例对象(root)看作“爷”元素,来向“父”元素demo传递数据,父元素demo再传数据到子元素demoChild:
1 | <div id="app"> |
1 | Vue.component("demo", { |
这是我们得到的结果。
我依旧觉得有必要证明一下demoChild中的数据是经过demo传入的,我们尝试把demo处的传输路径即porps截断,这可以帮助证明props不能隔代传输,只能一级一级的传输:
1 | <div id="div"> |
1 | //这是一个错误示范!! |
结果是子组件并不能越级直接获取它爷爷级的数据:
对象型props
当需要对props进行类型等的验证时,需要props属性的类型为对象。在props这一父对象中,应当包含[ 以各个props变量命名 ]的子对象,子对象内的每个属性都对[ 外界传入 props变量 的值]产生一项限制条件,如果不满足条件,值也会传入,但是会报错。
基本格式如下
1 | props: { |
来改一下上面的栗子,看看如果不满足值类型限制会如何:
1 | <div id="app"> |
1 | Vue.component("demo", { |
结果很正常——没有数据不显示:
但是输出界面十分糟糕:
先是报错说”one”的数据类型不是Number;之后又报错了”two”的数据类型不为Object。
总结
2021.7.27 这个Vue传值系列打算持续更了,后面我会带来更多的传值方式,今天刚把这 $emit重写完,新文章也请您多多照顾哈哈.
$emit的文章传送门:Vue组件传值(二) $emit子传父&事件触发