vue 往对象中添加键值对_【Vue】Vue学习之混入

今天学习了Vue中的“混入”知识点，写篇文章用自己的语言来向自己解释它，如有不足还望指点。

混入(mixins): 混入提供了一种非常灵活的方式，来分发Vue组件中的可复用功能

--摘自VUE官方文档

对于这句话的理解我想是这样的。我们在js代码中定义一个混入对象，这个混入对象的名字可以任意取，它只是一个单独的对象，里面可以包含一个组件可以有的任何组件选项:data,method,watch，钩子函数等等。它可以看做一个封装好的代码块，哪一个组件想用它，就可以通过mixins选项来将它包含进来，为自己所用。

在上面这个代码中，我定义了一个可以作为混入对象的对象，接下来只要使用mixins选项将它包含进某一个组件里面，就可以实现我们的混入功能。

这样我们再打开浏览器运行这个文件的时候,就会看到

Chrome

说明我们的混入选项已经生效，在实例被创建时调用了混入对象中的钩子函数created，向控制台发送了"Hello Mixins"的文字。

混入-选项合并：

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行"合并".

例如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

--摘自VUE官方文档

现有一个混入对象和一个实例对象(见代码):

var

运行后的结果:

Chrome

可以看到混入对象和使用混入对象的组件中共同拥有一个同名的数据message,并且两个值各不相同,混入对象中为"yes",而组件中为"no",而最后输出的数据为"no"，是原来组件中的数据，这说明混入对象中的数据对象中的键与组件中的数据对象中的键发生了冲突时，会以组件的值优先。

同名钩子函数将会合并成为一个数组，因此都将被调用，混入对象的钩子函数先于组件自身的钩子函数进行执行。

--摘自VUE官方文档

看下面一段代码:

var

这段代码是定义了一个混入对象和一个组件，该组件包含该混入对象，它们各拥有一个created钩子函数，混入对象的钩子向控制台输出"This is mixin's HOOK FUNCTION"，组件的钩子向控制台输出"This is conponents' HOOK FUNCTION"。在Vue实例被创建时，created函数调用。

执行结果如下:

很明显，两个钩子函数都被调用，并且混入对象mixin的钩子函数先于组件的钩子函数调用。

小结:使用mixins选项包含混入对象时，如遇到键值对的选项，组件优先，覆盖掉混入对象的键值对，如果是同名钩子函数，则都会包含进来，混入对象的钩子函数先执行。

vue 往对象中添加键值对_【Vue】Vue学习之混入相关推荐

python列表中的字典如何添加键值对_在Python中将键值对添加到字典中
Python字典是键值对的无序集合.在本教程中,我们将看到如何将新的键值对添加到已经定义的字典中.以下是我们可以使用的两种方法. 将新键分配为下标我们通过使用新键作为下标并为其分配值来向字典添加新元 ...
JS 遍历JSON对象中的键值对
对象:一组无序属性的集合,属性的值可以是任意的类型: json也是对象,数据都是成对的,也就是键值对: json实际上就是一组格式化后的字符串数据. 遍历JSON对象中的数据,可通过for-in循环实 ...
往数组里添加键值对_框架都是花哨的东西！js才是根基,分享一下给原生js数组的操作...
1Array.map()方法此方法原数组不会改变,会返回一个新数组.必须有返回值: 语法: array 回调函数是必穿的参数,thisValue是可选参数!对象作为该执行回调同时使用,传递给函数用作 ...
如何动态的向数组中插入键值对_在Java中实现的一个简单“HashMap”
如何创建Hash表对于把K(键)-V(值)这样的键值对插入Hash表中,需要执行两个步骤: 1.使用散列函数将K转换为小整数(称为其哈希码). 2.哈希码用于查找索引(hashCode%arrSiz ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
php数组foreach循环添加键值对_在PHP的foreach循环中插入一个$key作为变量
我有这个数组: $lista_agregados = array('po' => '0', 'brita' => '0'); 而这些数组: $po = array(0 => arra ...
python-往对象中添加属性值
class Cat:pass 对象.属性 t = Cat() t.name = "张三" print(t.dict) 反射添加 setattr(t, "age" ...
python字典返回键值对_从Python字典对象中提取键值对的子集？
好吧,这件事让我困扰了几次,所以谢谢你Jayesh的提问. 上面的答案看起来像任何一个好的解决方案,但如果你在你的代码中使用这个,那么包装功能恕我直言是有意义的. 此外,这里有两种可能的用例:一种是您 ...
php数组foreach循环添加键值对_循环 - PHP二维数组根据键值对获取一组数组 (不使用foreach)...
问题 $user = array( 0 => array( 'id' => 1, 'name' => '张三', 'email' => 'zhangsan@sina.com' ...

vue 往对象中添加键值对_【Vue】Vue学习之混入

vue 往对象中添加键值对_【Vue】Vue学习之混入相关推荐

最新文章

热门文章