Vue2+3 第二章 Vue组件化编程

组件定义:实现界面局部功能代码和资源的集合.

一.非单文件组件

1.基本使用

Vue中使用组件的三大步骤:

　　1.创建组件(定义组件)

　　2.注册组件

　　3.使用组件(写组件标签)

 

如何定义一个组件:

　　使用Vue.extend(options)创建,其中options和new Vue(options)时传入的options几乎一样,区别如下:

　　　　1.el不要写--因为所有组件最终都经过一个vm管理,由vm的el决定容器

　　　　2.data必须使用函数--避免组件被复用时数据存在引用关系

　　备注:使用template可以配置组件结构

 

如何注册组件?

　　1.局部注册:new Vue的时候传入components选项

　　2.全局注册:Vue.component('组件名',组件)

 

使用组件:编写组件标签

　　<组件名></组件名>

 

 

 

二.单文件组件

1.render函数

 

2.ref属性

　　1.被用来给元素或子组件注册引用信息(id的替代者)

　　2.应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc)

　　3.使用方式:

　　　　打标识:<h1 ref="xxx">.....</h1> 或<School ref="xxx"></School>

　　　　获取:this.$refs.xxx

3.props配置

4.mixin(混入)

　　功能:可以把多个组件公用的配置提取成一个混入对象

　　使用方式:

　　　　第一步定义混合,例如:

　　　　　　{

　　　　　　　　data(){....},

　　　　　　　　methods:{....},

　　　　　　　　...

　　　　　　}

　　　　第二步使用混入,例如:

　　　　　　1.全局混入:Vue.mixin(xxx)

　　　　　　2.局部混入:mixins:['xxx']

5.插件

6.scoped样式

　　作用:让样式在局部生效.防止冲突.

　　写法:<style scoped>

7.组件自定义事件--绑定

　　内置的事件是给HTML元素使用的,组件自定义事件是给组件使用的

8.组件自定义事件_解绑

9.全局事件总线

10.消息订阅与发布

11.配置代理

 

 

 

 

 

组件化编码流程

组件化编码流程

　　1.实现静态组件:抽取组件,使用组件实现静态页面效果.

　　2.展示动态数据:

　　　　2.1 数据的类型,名称是什么?

　　　　2.2 数据保存在哪个组件?

　　3.交互--从绑定事件监听开始.