Vue高阶组件

1. 什么是高阶组件

• 高阶组件是一个函数，它将一个组件作为参数并返回新创建的组件。返回的组件通常使用HOC（高阶组件）提供的功能进行扩充。
• 高阶组件就是在不影响父与子组件使用的情况下对子组件进行功能增强
• 高阶组件不是可以抓取和安装的软件，而是一种可以帮助编写可重用和可维护代码的技术方案。

2. 应用

需求：

1. 封装一个图片的组件(上方是图片，下方是文字)
2. 获取图片时间较长，可能会带有默认占位图片的功能, 也可能没有
3. 或者某些页面直接展示图片，某些页面要判断图片的清晰度或者宽高才能展示。

3. 代码

这是一个基本的带图片的组件 父组件

<template>
  <div>
    <smartAvatar></smartAvatar>
    <Avatar :img="img"></Avatar>
  </div>
</template>
const smartAvatar = withAvatarURL(Avatar)

export default {
  components: { smartAvatar, Avatar },
  data() {
    return {
      img: '',
    }
  },
  created() {
    this.img = 'https://avatars3.githubusercontent.com/u/6128107?v=4&s=200'
    //
  },
}

子组件Avatar

const Avatar = {
  props: ['img'],
  render(h, params) {
    return h('img', {
      attrs: {
        src: this.img,
      },
    })
  },
}

高阶组件smartAvatar

function withAvatarURL(InnerComponents) {
  return {
    props: ['username'],
    data() {
      return {
        url: 'http://via.placeholder.com/200*200',
      }
    },
    created() {
      setTimeout(() => {
        this.url = 'https://avatars3.githubusercontent.com/u/6128107?v=4&s=200'
      }, 2000)
    },
    render(h) {
      return h(InnerComponents, {
        props: {
          img: this.url,
        },
      })
    },
  }
}

所以此时，只需要图片调用Avatar即可，如果需要占位则调用smartAvatar。