1_vue注册组件
全局:Vue.component("组件名", 组件对象)
局部: components: {
"组件名": 组件对象
}
2_vue组件通信
父向子:子组件用props接收外部传入的值
props[]定义变量
props{}进行校验
子向父: 父:@自定义事件名="父methods函数"
子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码
3 vue 生命周期
常用的 created:网络请求
mounted: 操作真实DOM
4 $refs-获取DOM
目标: 利用ref 可以用于获取 dom 元素
this.$refs.名字
5 $nextTick使用
目标: 点击修改data里的数据，立马通过DOM元素获取修改后的内容
this.$nextTick(() => {})
6 动态组件,组件缓存,激活与非激活
目标: 多个组件使用同一个挂载点，并动态切换
利用vue内置的component组件,配合is属性
组件缓存
目标: 组件切换会导致组件被频繁销毁和重新创建, 性能不高
vue内置的keep-alive组件把要缓存的组件包起来
激活与非激活
目标: 被缓存的组件不再创建和销毁, 而是激活和非激活
activated – 激活时触发
deactivated – 失去激活状态触发
7 组件插槽,具名插槽,作用域插槽
目标: 用于实现组件的内容分发, 通过 slot 标签, 可以接收到写在组件标签内的内容
1.先在组件内用slot占位
2.使用组件时, 传入具体标签插入
3.<slot>内放置内容，作为默认显示内容
具名插槽
目标: 当一个组件内有2处以上需要外部传入标签的地方
slots使用name属性区分名字
template 配合v-slot名字来分发对应标签
v-slot可以简化成#使用
作用域插槽
目标: 子组件里值, 在给插槽赋值时在父组件环境下使用
1. 子组件, 在slot上绑定自定义属性和子组件内的值
2. 使用组件,用template和v-slot="自定义变量名比如scope"
3. scope变量名自动绑定slot上所有属性和值
