1.1、Vue组件注册
注册vue组件的步骤：创建组件构建器
注册组件
使用组件。
Document
总结：
创建组件的基本步骤： 创建组件构造器、注册组件以及使用组件。
语法：创建组件构造器：
const c = Vue.extend({
template:'布局内容'
});
注册组件： Vue.component("标签名称【自定义】",c【构造器名称】);
1.2、局部组件和全局组件
代码如下：
Document
总结：
全局组件是可以在多个Vue实例中进行使用，但是在实际的开发中使用全局组件比较少。
局部组件是在单个的创建的Vue实例使用，需要单独创建组件构造器，但是在实际的开发过程使用局部组件比较多。
1.3 、父组件与子组件
代码如下：
Document
总结：
每个组件构造器中都会有一个 components属性，用来挂载 子组件的构造器。
语法如下：
const c = Vue.extend ({
template:``,
components:{
标签名：子组件构造器名称 [标签名为自定义]
}
});
而父组件则挂载到根组件上面，也就是创建的Vue实例。
需要注意：子组件的标签必须放到父组件的div里面，要不然会报错。
1.4、注册组件的语法糖写法
代码如下：
Document
总结：看以上代码。
1.5、组件模板的分离写法
代码如下：
Document
组件抽离二种写法
局部组件的使用
Document
父组件
总结：看以上代码。
1.6、为什么组件使用data（）方法
代码如下：
Document
总结：
组件多次调用，必须用data（）方法，返回一个新的对象，而避免多次调用触发事件值会发生连锁反应。
1.7、父组件与子组件的通信
代码如下：
Document
- {{item}}
{{cmess}}
总结：
父组件与子组件之间的通信有两种方式：
1）、props 属性 父组件向子组件传递
props有三种写法：
①、直接变量写到props数组中。请看代码第一种使用方式。
②、将props变成对象，里面的属性也就是要绑定的变量，以键值对的方式：key：变量名 value值为：传递变量的数据类型；详情看代码第二种使用方式。
③、将props里面的变量，变成对象。请看代码第三种使用方式。 【推荐使用第三种】
注意：
定义：定义组件变量的时候，不要使用驼峰标识的方式命名变量。
2）、通过事件从子组件向父组件传递，也就是自定义事件。
1.8、子组件向父组件传值并发送自定义事件
代码如下：
子组件往父组件传值
父组件接收子组件的值：{{mess}}
总结：
子组件往父组件传值，需要借助 this.$emit('自定义事件名称'，参数) 往父组件发送一个事件，并在父组件进行监听事件。以上代码可参考。
1.9、子组件往父组件传值，并同步更新父组件上变量的值 经典案例
需求背景：
页面中有两个文本框【子组件】同时还有父组件的两个变量，子组件的两个变量，输入文本后同时更新父组件的变量和子组件的变量。
代码如下：
子组件往父组件传值
父组件vue实例中变量mess1：{{mess1}}
父组件vue实例中变量mess2：{{mess2}}
子组件中变量cmess2：{{cmess2}}
2.0、父子组件的访问方式
代码如下：
Document
总结：
如果想用父组件访问子组件就使用：refs ，实际开发中经常使用$refs,但是必须在子组件的标签中添加 ref = '值' 属性才能访问到子组件的属性或者函数。
子组件访问父组件就使用：$parent 【不经常使用】
2.1、solt 具名插槽基本使用 【很重要】
代码如下：
Document
总结：
插槽的定义： 抽取共性，保留不同。
1、插槽的基本使用
2.2、具名插槽的使用
代码如下：
Document
左边1
中间1
右边1
标题
您好
总结：
在实际的开发过程中有些部分不是共用的，我们需要将不是共用部分放到指定的位置，就得需要具名插槽。
2.3、作用于插槽的使用
代码如下：
Document
{{item}}****
- {{item}}
总结：
作用域插槽：父组件替换插槽的标签，但是内容由子组件来提供。
在实际的开发中我们需要在组件中将数据以不同的方式展示，比如：横向、纵向，想在父组件中展示，那么我们如何拿到子组件中的数据，
1）需要在子组件模板中 定义一个属性 ：data= "子组件变量" [:data 随便命名]，然后再父组件中的子组件标签中定义模板 定义引用 slot-scope="slot" ，然后横向展示数据。
2.4、ES模块化导入导出 代码如下：
Title
AA.js
//第一种导出方式 导出对象
let name = "小明";
let flag = true;
export {
name,
flag
}
//第二种导出方式 导出变量
export let name = "小明";
export let flag = true;
//第三种导出方式 函数
export function test (sum1,sum2)
{
return sum1+sum2;
}
//第四种导出 类
export class person {
run (){
console.log("导出类");
}
}
//第五种 export default 一个模块只有一个default
const address ="山东省济南市"
export default address
export default 函数
export default function (){
return "export default 函数"
}
//第六种全部导出 加 export
export let name ="再见"
BB.js
/**
* Created by Mr.Fu on 2021/6/6.
*/
import {name,flag} from './AA.js'
if (flag){
console.log(name);
}
//导入变量
import name from './AA.js'
console.log(name);
import flag from './AA.js'
console.log(flag);
//导入方法
import {test} from './AA.js'
console.log(test(20,20));
//导入类
import {person} from './AA.js'
const p= new person();
console.log(p.run());
//导入 default
import add from './AA.js'
console.log(add);
//导入 default 函数
import add from './AA.js'
console.log(add());
//统一全部导入
import * as demo from './AA.js'
console.log(demo.name);
总结：
第一种
导出对象：
let name = "小明";
let flag = true;
export {
name,
flag
}
导入对象：
import {name,flag} from './AA.js'
if (flag){
console.log(name);
}
第二种
导出变量：
//第二种导出方式 导出变量
export let name = "小明";
export let flag = true;
导入变量：
import name from './AA.js'
console.log(name);
import flag from './AA.js'
console.log(flag);
第三种
导出函数：
//第三种导出方式 函数
export function test (sum1,sum2)
{
return sum1+sum2;
}
导入函数：
//导入方法
import {test} from './AA.js'
console.log(test(20,20));
第四种
导出类：
//第四种导出 类
export class person {
run (){
console.log("导出类");
}
}
导入类：
//导入类
import {person} from './AA.js'
const p= new person();
console.log(p.run());
第五种 一个模块只有一个default
导出export default：
//第五种 export default 一个模块只有一个default
const address ="山东省济南市"
export default address
export default 函数
export default function (){
return "export default 函数"
}
导入export default：
//导入 default
import add from './AA.js'
console.log(add);
//导入 default 函数
import add from './AA.js'
console.log(add());
第六种
全部导出：
//第六种全部导出 加 export
export let name ="再见"
全部导入：
//统一全部导入
import * as demo from './AA.js'
console.log(demo.name);