Vue通信、传值、组件生命周期、插槽

目录

一、在组合式API(setup)中使用this

1、this：代表当前的组件

2、在Vue3的setup中没有this，但是有proxy，作用与this的作用相同

3、强调：

二、兄弟组件之间的传值：使用mitt第三方库

三、跨级组件之间的通信

1、provide( name,value )

2、inject(name,default)

四、Vue组件的生命周期

1、created函数：Vue实例已经创建完成,挂载还没开始时调用

2、mounted函数：Vue实例已经挂载到页面控件上调用

3、beforeunmount函数：在Vue实例销毁之前调用

4、unmountd函数：Vue实例被销毁之后调用

五、Vue的插槽

1、插槽(slot)

2、使用插槽的目的：使组件更具有扩展性。

3、插槽的使用

(1)匿名插槽(默认插槽)

(2)具名插槽

(3)作用域插槽

六、Vue的过渡动画

1、在组件的插入、移除、更新时可以附带转场效果，即使用过渡动画

2、在vue中内置了transition组件,可以用它来包装要展示过渡动画的的组件，在transition组件的name属性指定要执行的动画的名称，vue约定了一系列CSS类名来定义各个过渡过程中组件的状态

3、transition的显示的CSS类名

4、transition的隐藏的CSS类名

5、互斥动画

6、设置动画过程中的监听回调

7、列表过渡动画

---

一、在组合式API(setup)中使用this

1、this：代表当前的组件

2、在Vue3的setup中没有this，但是有proxy，作用与this的作用相同

获取proxy的方法

第一步：从vue中导入方法：getCurrentInstance

import { getCurrentInstance } from 'vue';

第二步：从getCurrentInstance方法中获取proxy

const { proxy } = getCurrentInstance()

3、强调：

(1)setup中没有this，可以使用proxy,其作用与this相同

(2)在setup中定义普通变量,建议使用ref进行初始化。改变用ref初始化的变量的值,采用的方法

变量名.value = '新值'

(3)在setup中定义普通对象,建议使用reactive进行初始化

const obj = reactive({})

二、兄弟组件之间的传值：使用mitt第三方库

1、创建事件中心：创建事件触发器并导出

2、兄弟组件定义接收数据方法：对指定事件进行监听

3、兄弟组件定义发送数据方法：触发对方监听的事件并发送数据

三、跨级组件之间的通信

使用provide / inject方法,provide发送数据,inject接收数据

1、provide( name,value )

name：是属性名

value：属性值

2、inject(name,default)

name：是属性名。必须和provide的属性名相同

default：可选参数  

四、Vue组件的生命周期

钩子函数的执行时机(钩子函数：不用显式调用,当组件运行到某个阶段时会自动调用)用户要根据具体的需求确定在组件生命周期某个时候完成某个操作

1、created函数：Vue实例已经创建完成,挂载还没开始时调用