vue 组件通信 请求数据的三种方式

Review

组件定义

组件注册

组件通信

父子组件通信：

父传子：使用 props

子传父：使用事件

跨组件通信：

• 转换为父子组件通信的方式（繁琐）
• enent-bus （事件总线）

事件总线

借助一个中间对象，来实现数据的挂载及传递：以事件的方式实现，通过绑定自定义事件来挂载数据并处理数据，通过触发事件的执行来传递数据。借助的中间对象实际上是一个空的 Vue 实例

const bus = new Vue()

在需要接收数据的组件中绑定事件（入），使用 bus.$on(事件名称，事件处理程序)

在需要传递数据的组件中触发事件（出），使用 bus.$emit(事件名称，传递输入)

生命周期

组件从创建到消亡的整个过程

在生命周期中，利用 钩子函数 可以执行额外的一些操作

• create 阶段

  • beforeCreate()

  • created()

    通常在 created 钩子函数中发起异步请求（ajax）

• mount 阶段

  • beforeMount()

  • mounted()

    通常要使用页面中挂载的 DOM 元素，到该钩子函数中获取

• update 阶段

  • beforeUpdate()
  • updated()

• destroy 阶段

  • beforeDestroy()
  • destroyed()

异步请求

ajax：

1. 创建 XMLHttpRequest 实例
2. open(method, url, async)，建立连接
3. send(params)，发送请求。如果要像表单一样 POST 数据，需要在 send 前调用 setRequestHeader()
4. 处理响应。xhr.onreadystatechange