VUE学习笔记-组件学习
2019-04-19 17:01
369 查看
VUE的组件是为了拆分vue实例
- 模块化:基于功能划分,用于保存模块职能单一
- 组件化:基于UI界面划分,方便UI组件的复用
VUE组件的使用过程(基础用法)
- vue.extend 先扩展(扩展的template字串里面,只有拥有一个根节点)
- vue.component中注册(注册名建议全部小写)
- UI中直接引用 (引用组件名称也是全部小写)
VUE的组件使用方法(使用template来产生组件的模板)
- 在el的同级定义一个template模板
- 在Vue.compent注册template模板,绑定模板名称
- 在界面上引用
私有组件与全局组件定义方法类似,区分只是引用 的范围不同
组件中也可以定义data 数据的引用与实例的data 一样,但是data的属性,必须要返回一个function的对象
组件中使用自定义方法
- 由于每个定义组件时,都会初始化一个新的data 对象,所以在同时引用多次组件时,互不影响
组件的传值:首先在引用组件上绑定需要传值的数据,然后在子组件上声明传值的对象名
- 实例上的数据可读,可修改
- 子组件上的数据只读
组件上的方法传递:
- 最外层组件引用时,指定需要引用实例的方法名,及组件的方法名
- 在组件的props上不用注册方法名,但是组件方法中应用时,需要使用this.$emit(“方法名”)来调用
组件上的方法传递:父子组件传值
- 首先实现子组件调用父组件的方法
- 同时传入子组建的data数据
- 在父组件中完成数据更新
组件上定义一个ref 之后,就可以从外部访问子组件的数据及方法。
相关文章推荐
- Vue4.3学习笔记 组件参数校验与非props特性
- Vue 2.0学习笔记:组件数据传递
- Vue学习笔记——实例和内置组件【转自jspang】
- vue学习笔记3 -----组件
- Vue学习笔记3.1 子-父组件传递数据 v-bind、v-on、$emit()
- vue学习笔记--父子组件通信
- Vue组件学习笔记
- Vue 学习笔记 — 组件初始化
- Vue 2.0学习笔记:Vue组件内容分发(slot)
- vue学习笔记:6.3.父组件与子组件间的传值
- Vue 2.0学习笔记:实现组件数据的双向绑定
- vue学习笔记:6.2.组件的切换方式
- 【音乐App】—— Vue-music 项目学习笔记:播放器内置组件开发(二)
- vue自定义组件和列表循环--vue学习笔记
- 学习笔记——Vue的组件化之notification组件
- Vue学习笔记进阶篇之函数化组件解析
- vue.js学习笔记(三)--父子组件通信总结
- Vue学习笔记4.2 父子组件传递
- vue学习笔记之——v-for与局部组件的传值
- Vue.js第四天学习笔记(组件)