组件化开发
根据封装的思想，把页面上可重复用的UI结构封装为组件，从而方便项目的开发和维护
组件-->实现应用中局部功能代码和资源的集合
vue支持组件化开发，组件的后缀名是.vue。每个.vue组件都由3部分构成：
1. template-->组件的模板结构 (DOM标签)
template标签只起到包裹的作用，不会被渲染成真实的元素
<template> <div class="test-box"> <h3>这是用户自定义的组件</h3> <div>用户名：{{ username }}</div> <button @click="changeName">修改用户名</button> </div> </template>
注意：在template标签中，只允许存在一个根元素(所以template里面要加一个div作为根元素包裹其他元素)
2. script--> 组件的JavaScript行为
// 注意：在组件中，script标签内必须写 默认导出 的语法（固定格式，一定要写） // export default {} export default { // 注意：组件中的data不能像之前一样指向一个对象，而是一个函数 // 目的是防止组件被复用的时候产生数据的关联关系，从而造成干扰 data(){ // 当前组件的data数据源 return { // 返回值return一个存放数据的对象 username: 'zhangsan' } }, methods: { console.log(this) // 这里的this指向的是当前Vue组件的实例对象 changeName(){ this.username = 'lisi' // data方法中的username是当前组件的实例对象中的一个属性，可以通过 "对象.属性名" 来调用 } } // 当前组件的侦听器watch、计算属性computed的设置都跟之前的定义方式一样 }
3. style--> 组件的样式
// css样式表的书写位置 // 加了lang属性才能使用less语法 <style lang="less"> .test-box { background-color: pink; } h3 { color: red; } </style>
组件之间的关系
使用组件的三个步骤：
在App.vue组件中
1. 使用import语法 导入 需要的组件
// 写在script标签内 // @ 代表的是src这层路径 import Left from '@/compents/Left.vue'
2. 使用components节点 注册 组件
export default { components: { 'Left': Left // '组件名称': 组件 键值对 // 因为键和值一样，所以直接简写为一个Left也可以 } }
注意1：使用components注册的节点是私有子组件
注意2：这里的组件注册名称的设置是为了在使用组件的时候写的标签名；而组件声明的时候可以设置的name属性(与data平级的name节点)，主要是在存储的时候使用(在调试工具中也会显示自己设置的name属性)
注意3：若在声明组件的时候没有指定name属性，则组件的名称默认就是注册时的名称
3. 以标签的形式 使用 上面注册的组件
<div class="box"> <Left></Left> </div>
注意：组件创建后并没有生成实例，只有在以标签的形式使用了组件的时候才生成了组件实例( new Vue( ) )
私有子组件与全局组件
- 通过components注册的是私有子组件
例如：在组件A的components节点下注册了组件B，则组件B只能用在组件A中，而不能用在别的组件中
在一些组件需要在不同组件中频繁使用的时候，需要在各个组件中注册，比较繁琐且代码冗余。可以通过全局组件解决
- 注册全局组件
在vue项目的main.js入口文件中，通过Vue.component( )方法注册全局组件
// 在main.js中 // 导入需要全局注册的组件 import Count from '@/components/Count.vue' // 使用Vue构造函数的component方法 // 参数1：表示组件的"注册名称"，字符串格式。使用组件时的标签名就是<MyCount></MyCount> // 参数2：需要被全局注册的组件 Vue.component('MyCount', Count)
注意！！！要先注册全局组件，再在实例中使用组件。(即必须在Vue实例化之前注册全局组件，否则组件不会生效)
