VUE学习笔记-组件学习

VUE的组件是为了拆分vue实例

• 模块化：基于功能划分，用于保存模块职能单一
• 组件化：基于UI界面划分，方便UI组件的复用

VUE组件的使用过程（基础用法）

• vue.extend 先扩展（扩展的template字串里面，只有拥有一个根节点）
• vue.component中注册（注册名建议全部小写）
• UI中直接引用 （引用组件名称也是全部小写）

VUE的组件使用方法（使用template来产生组件的模板）

1. 在el的同级定义一个template模板
2. 在Vue.compent注册template模板，绑定模板名称
3. 在界面上引用
   

私有组件与全局组件定义方法类似，区分只是引用 的范围不同

组件中也可以定义data 数据的引用与实例的data 一样，但是data的属性，必须要返回一个function的对象

组件中使用自定义方法

1. 由于每个定义组件时，都会初始化一个新的data 对象，所以在同时引用多次组件时，互不影响

组件的传值：首先在引用组件上绑定需要传值的数据，然后在子组件上声明传值的对象名

1. 实例上的数据可读，可修改
2. 子组件上的数据只读

组件上的方法传递：

1. 最外层组件引用时，指定需要引用实例的方法名，及组件的方法名
2. 在组件的props上不用注册方法名，但是组件方法中应用时，需要使用this.$emit（“方法名”）来调用
   
   

组件上的方法传递:父子组件传值

1. 首先实现子组件调用父组件的方法
2. 同时传入子组建的data数据
3. 在父组件中完成数据更新

组件上定义一个ref 之后，就可以从外部访问子组件的数据及方法。