vue子组件赋值props_21天完美搞定Vue框架技术（第2天）

前言：

实例化Vue的核心是做_init方法的初始化

初始化的关键一步是选项的合并

合并的本质就是用户自定义选项和Vue自带默认选项的合并

所以，今天我们要学习的就是关于选项合并的一些知识

1、Vue当中每种选项合并都有定义好的合并策略

合并策略：

（1）如果父类组件和子类组件有相同的选项，直接合并

（2）如果父子组件没有相同选项，子类组件有取子组件，没有子组件取父组件

2、选项合并的种类

包括大致5大类，分别是：

常规选项合并，如data、el合并

默认资源选项合并，如components、directives、filter

生命周期钩子函数合并，如mounted, created, destoryed

数据侦听选项合并，即watch

方法及属性选项合并，如props、methods、inject、computed

3、el的合并策略

el的作用：找一个DOM元素，让Vue实例挂载到上面

合并策略：只在创建Vue实例才存在，在子类或者子组件中无法定义el选项

4、data的合并策略

（1）父子类关系

先对data选项规进行范校验，保证它是一个函数

合并策略：

子类不存在data选项，则合并结果为父类data选项

父类不存在data选项，则合并结果为子类data选项

同时存在进行合并，如果冲突，保留子类data选项

（2）存在Vue根实例

Vue实例的data选项是一个对象

合并策略：

实例中不传递data时，默认返回Vue构造函数上的data属性选项

实例中传递data时，将实例的data对象和Vue构造函数上的data属性选项合并

5、components、directives、filter合并策略

（1）创建一个空对象且让这个空对象的原型指向父类选项

（2）将子类选项赋值给这个空对象

其实，说白了就是让子类选项继承父类选项

6、生命周期钩子函数合并策略

生命周期函数有12个，分别是：

'beforeCreate',

'created',

'beforeMount',

'mounted',

'beforeUpdate',

'updated',

'beforeDestroy',

'destroyed',

'activated',

'deactivated',

'errorCaptured',

'serverPrefetch'

合并策略：

（1）父子类的选项必须都是函数

（2）子类和父类有相同钩子选项，合并为数组，子类选项在数组末尾，晚于父类选项执行

（3）子类不存，返回父类选项

（4）子类存在，父类不存在，返回子类钩子选项，形式为数组

7、watch选项合并

watch作用：在数据变化时，使用自定义的侦听器来响应数据的变化

合并策略：

（1）没有父则直接用子选项

（2）没有子，则默认用父选项

（3）都有时合并成数组，数组的元素可以是回调函数，选项对象，或者函数名

8、props、methods、inject、computed合并策略

（1）父类不存在，返回子类选项

（2）子类父类都存在，子类选项去覆盖父类选项

后记：

赠人玫瑰，手有余香！如果觉得文章对您有帮助，

请给一个大大的赞，还可以分享让更的人知道哦！

您也是web前端学习者，可以加VX：qingyulan52

最后祝您学习进步，早日成为技术大拿！！！