Vue组件化开发(笔记一)

组件化开发步骤:
1.创建组件构造器 Vue.extend({})
2.注册组件 Vue.component()
3.使用组件

创建组件的构造器对象,Vue对象提供了Vue.extend( )方法,可以用来创建构造器,括号里面放置一个参数,这个参数是个对象类型,和我们创建vue的实例一样,new Vue({ })。

全局组件时是Vue.component(),局部组件时是components: { }

上面的这种组件是全局注册,意味着可以在多个Vue实例下使用。

组件的局部注册(开发里面用得最多的),在Vue实例里面注册就叫局部注册(而全局组件是在Vue实例之外注册的,看上面的截图可以看到)。

父组件和子组件的关系(理清谁在谁里面注册,谁在谁里面使用组件,也就是我们常常碰到的作用域问题)

组件注册的语法糖,因为Vue2.0版本后,已经很少使用Vue.extend({})创建构造器的写法了。

全局组件语法糖写法:


注册局部组件的语法糖:


这种语法糖注册组件,整个代码页面看起来非常眼花缭乱,让人维护傻傻分不清,所以我们Vue提供了组件模板抽离的写法(当我们学习了Vue提供的脚手架的模板抽离方法之后,脚手架那个会更好。)

第一种模板抽离方法:script标签,type类型必须是text/x-template



不过上面这种模板抽离很少用(不推荐)。

第二种模板分离写法:template标签形式


组件的template模板可以访问Vue实例数据吗?不能。


vue实例里面定义的数据,只能在绑定对应的挂载点上使用,而组件模板是不能使用vue实例定义的数据的,专业术语:组件不能访问vue实例。

组件是一个单独功能模块的封装,他有属于自己的template模板,还有component,自然也应该有自己存放的属性data,只不过这个data不再是一个属性对象的形式,而应该是函数,并且还有一个return返回对象。



如果是对象形式的data

,会报这个错误

报错信息提示我们,data应该是一个函数,并且return回一个值。

下面来看下组件模板访问自己的data



通过上述的例子,其实组件的原型是指向vue的,我们发现组件内部其实也是一个vue实例,组件里面既然可以有template,data,component,相对的像vue实例里面的methods,computed在组件里面也是可以使用的。

我们会想到,组件中的data为什么必须是一个函数?

函数形式的data保证了组件实例的相互独立性。
我们这里调用3此同一个组件实例来验证以下,点击每个按钮,他们都是相互独立的,互不影响。


我们可以看见效果,每个小组键都是互相独立使用data函数定义的count,每次返回的都是一个新的对象,这就是组件复用,组件之间在哪里调用或者调用几次都不会相互影响,更不会产生连锁反应。

父子组件通信传递的问题

首先我们得明确,通过上面的例子发现,我们的子组件并不能引用和访问父组件或者Vue实例定义的数据。
但实际上,我们有这样一种需求,数据确实需要从上层传递到下层,我们从服务器请求了很多很多的数据回来,其中有一部分的数据,并非我们在整个页面的的大组件进行展示的,而是单纯想要给下面的子组件来进行展示。
这个时候呢,父组件并不会再让子组件发送一个网络请求,而是将父组件(大组件)中请求到的数据直接传递给小组件(子组件)。

父子组件间是如何进行传值(数据通信的呢)?
1.父组件通过props向子组件传递数据(这里的props是properties的缩写,属性的意思)
2.子组件通过自定义事件向父组件发送消息(emit,发射的意思)

下面是代码图展示。
父传子代码





    
    




    
    
    

关于父传子props的写法,有很多种常见类型。

第一种是props:[ ]数组类型
第二种是对象类型{}



父传子props有2个bug,驼峰命名标识,要用短横杠代替(脚手架不会限制,只有HTML代码会这样,所以HTML代码里面不要写驼峰,不然很致命,建议所有命名都小写),定义子组件模板的时候,必须有一个根节点,必须被根节点包裹,default默认值的好处是,页面报错的时候,会把默认值渲染到页面上。





    
    




    
    

驼峰标识用短横杠代替


如果组件模板中没有根节点,缺失了我红色框选的一对div标签的话,会报如下错误,因为div作为根节点包裹他下面的所有标签。



子级向父级传递(当子组件需要向父组件传递数据时一般用自定义事件来完成,用v-on指令监听dom事件)


自定义事件的流程:
在子组件中,通过过$emit()来向外发射触发事件,告诉父组件用户把我干嘛了(我被被点击了)。
在父组件中,父组件通过v-on来监听子组件触发事件,这时候的父组件已经收到了消息是儿子发过来的消息(并且做出相应的回应)






    
    




    
    
    

逻辑图:


你可能感兴趣的:(Vue组件化开发(笔记一))