Vue技术栈(3)

Vue组件化原理

 我们写的组件实际就是一个options对象

 当我们声明完一个组件时候,Vue内部通过extend全局方法继承Vue构造函数生成一个子类,同时会合并options

如果是全局组件注册调用Vue.components,会将组件(我们实际写的组件就是一个options再转化为一个组件类) 

 转化为一个组件类然后挂载Vue.options.

 components,同时vue内部也把Vue构造函数挂载到options._base,方便以后我们局部注册组件拿到extend方法,然后转化为组件类

 当我们去使用这个组件的时候,会创建一个组件实例,实例会调用mount方法生成真实的dom,通过el拿到真实的dom然后挂载到页面通过上面所说,为什么组件中data必须是一个函数,防止多个组件实例互相影响

 props原理

首先要明白,props是相对组件来说的

生成组件虚拟dom时会增加一个属性叫propsData存放着用户传递的数据

在初始化过程中会进行属性的初始化操作。会用用户编写的props和propsData进行检测(进行检验validateProps)。最终将属性存放到_props上。并使用proxy方法进行代理,将其代理到实例上。

跟React不同的是,React的props是挂载props对象上的,而Vue还要在组件显示声明传递过来的Props,所以这就是为什么要进行检验了 

组件通信 

父子通信基于Props实现 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值