课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

课程章节：Vue3.0

主讲老师：双越老师

课程内容：

今天学习内容包括：

1. props复习

2. 自定义事件
   

课程收获：

通过父组件给子组件传递函数类型的 props 实现：子给父传递数据

• 在父组件 App.vue 中定义 getSchoolName() 用来接收从子组件传过来的值。

• 在子组件 School.vue 中定义 props: ['getSchoolName'] ，接收父组件给子组件传递函数。

• 在子组件 School.vue 的 methods 方法中把值传给父组件。

自定义事件

• 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 (使用@)

• 在父组件 App.vue 中自定义事件 @atguigu 绑定到 Student 组件上。

• 在子组件 Student.vue 中通过 this.$emit("atguigu", xxx) 触发该事件。

• 可以传参，在 App 组件中可以以形参的方式（...params）接收并输出。

ref

• 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 (使用ref)。

• 
  

• 在 Student 标签中通过 ref = student 给组件注册引用信息（相当于 id 的替代者）。

• 在钩子函数中，通过 this.$refs.student.$on('atguigu', xxx) 绑定自定义事件。（ref 打标识，$refs 获取）

• vm.$on(event, callback) 用于监听当前实例上的自定义事件，事件可以由 vm.$emit 触发。

• 如果把 $on 改成 $once 则只触发一次。

• 可以给添加 setTimeout() 执行异步任务。

课程学习截图：