Vue笔记五:Vue组件

Vue组件是可重用的Vue实例
组件component
拥有专属的HTML CSS JS和数据的页面独立功能区域
组件代码具有很高的重用性
只要页面中存在需要被反复使用的功能区域 都要定义为组件

创建组件

Vue.component(“组件名”,{
template:“在唯一的父元素下创建模板html片段”,
data(){return {//相当于newVue的data}},
methods:{},Vue:{},computed:{}
})
组件的第一个成员是template 是一段html片段 称为组件的模板
组件的第二个成员是data函数 return一个包含变量的对象 这样反复多次使用组件时 return出的对象中的变量互不干扰(参考闭包) 每使用一次组件 都自动调用一次data 自动获得一个返回的新对象作为当前组件副本专属的数据对象
组件其实就是一个可重用的标签 组件名其实是标签名
HTML标签名不区分大小写 如果组件名由多个单词组成时 不要用驼峰应该用-分隔

组件与普通vue实例的区别
与new Vue的区别: newVue是页面中先存在html 再根据el去匹配对应的元素
组件是先定义好组件 在组件中提前保存好一段html作为今后使用组件的模板 在需要使用组件的区域按照模板创建HTML片段

组件化开发

组件化开发
1.传统前端开发问题: 一个页面文件 无法多人协作编辑
2.先将一个页面分割为多个独立的组件文件 由多人协作开发 开发完成后再由框架自动拼接回一个完整的页面中展现给用户
3. 协作 松耦合
4. a.先将页面划分为多个组件
b.在独立文件中 分别编写每个组件的内容和功能
c.再用一个完整的页面和框架 引入组件文件 拼接成一个完整的页面

组件分类:
a.根组件:监控整个页面 new Vue()
b.全局组件:可以在全局中随处调用的组件 Vue.component()
c.子组件:只能在某个父组件内使用的组件
将全局组件降级为子组件
var 子组件名 ={template:{},data(){return {}},methods:{},…}
父组件中存在属性 components 包含其下的子组件
components:{子组件1,子组件2,…}

组件间传值

父——>子
传值：父组件中将子组件需要的成员绑定给一个自定义的属性
子组件中 通过props属性获得父组件内放在子组件中的自定义属性值
props中的变量用法和data中的变量用法完全一样
传方法：

子——>父
传值：this.$emit();

传方法：this.$emit(方法名,参数列表)

兄弟组件间传值