Que sont les composants d'ordre supérieur de Vue ?

Dans Vue, un composant d'ordre supérieur est en fait une fonction d'ordre supérieur, c'est-à-dire une fonction qui renvoie une fonction de composant. Caractéristiques des composants d'ordre supérieur : 1. Il s'agit d'une fonction pure sans effets secondaires, et le composant d'origine ne doit pas être modifié, c'est-à-dire que le composant d'origine ne peut pas être modifié 2. Il ne se soucie pas des données (accessoires) ; passé, et le composant nouvellement généré ne se soucie pas de la source des données 3. Les accessoires reçus doivent être transmis au composant empaqueté, c'est-à-dire que les accessoires du composant d'origine sont directement transmis au composant d'emballage. Les composants de commande peuvent complètement ajouter, supprimer et modifier des accessoires.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Introduction aux composants d'ordre supérieur

vue Compréhension des composants d'ordre supérieur, dans React, les composants sont implémentés avec du code réutilisé, tandis que dans Vue, ils sont implémentés avec des mixins, et certains concepts de composants d'ordre supérieur sont également manquants dans Les documents officiels. Parce qu'il est difficile d'implémenter des groupes d'ordre élevé dans Vue, ce n'est pas aussi simple que React. En fait, les mixins dans Vue sont également remplacés par des mixins. Après avoir lu une partie du code source, j'ai une compréhension plus approfondie. de Vue

Le composant dit d'ordre élevé est en fait une fonction de premier ordre, c'est-à-dire une fonction qui renvoie une fonction de composant. Comment l'implémenter dans Vue ? Notez que les composants d'ordre élevé ont les caractéristiques suivantes

高阶组件(HOC)应该是无副作用的纯函数，且不应该修改原组件,即原组件不能有变动
高阶组件(HOC)不关心你传递的数据(props)是什么，并且新生成组件不关心数据来源
高阶组件(HOC)接收到的 props 应该传递给被包装组件即直接将原组件prop传给包装组件
高阶组件完全可以添加、删除、修改 props

Exemples de composants d'ordre élevé

Base.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    be3b8d7b68acfe2d6133cd36dc6a63f1props: {{test}}94b3e26ee717c64999d7867364b1b4a3
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  name: 'Base',
  props: {
    test: Number
  },
  methods: {
    Click () {
      this.$emit('Base-click')
    }
  }
}
2cacc6d41bbb37262a98f745aa00fbf0

Les composants Vue ont principalement trois points : les accessoires, les événements et les emplacements. Pour le composant Base Component, il reçoit un prop de type numérique, à savoir test, et déclenche un événement personnalisé. Le nom de l'événement est : Base-click, sans slots. Nous allons utiliser le composant comme ceci :

Maintenant, nous avons besoin que le composant de base imprime une phrase : haha ​​​​à chaque fois qu'il est monté. En même temps, cela peut être une exigence de nombreux composants, donc selon le. méthode mixins, nous pouvons faire ceci, définissez d'abord les mixins

export default consoleMixin {
  mounted () {
    console.log('haha')
  }
}

puis mélangez consoleMixin dans le composant Base :

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    be3b8d7b68acfe2d6133cd36dc6a63f1props: {{test}}94b3e26ee717c64999d7867364b1b4a3
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  name: 'Base',
  props: {
    test: Number
  },
  mixins: [ consoleMixin ],
  methods: {
    Click () {
      this.$emit('Base-click')
    }
  }
}
2cacc6d41bbb37262a98f745aa00fbf0

Lorsque vous utilisez le composant Base comme celui-ci, un message haha ​​​​sera imprimé une fois chaque montage terminé, mais maintenant nous devons utiliser des composants d'ordre supérieur pour obtenir la même fonction. Fonction, rappelez-vous la définition des composants d'ordre supérieur : recevoir un composant en tant que paramètre et renvoyer un nouveau composant. Ce à quoi nous devons donc penser en ce moment, c'est ce que c'est. un composant dans Vue ? Les composants dans Vue sont des fonctions, mais c'est le résultat final. Par exemple, notre définition de composant dans un composant à fichier unique est en fait un objet d'options ordinaire, comme suit :

export default {
  name: 'Base',
  props: {...},
  mixins: [...]
  methods: {...}
}

N'est-ce pas un pur objet

import Base from './Base.vue'
console.log(Base)

Quoi ? est la base ici ? Il s'agit d'un objet JSON, et lorsque vous l'ajoutez aux composants d'un composant, Vu finira par construire le constructeur de l'instance avec ce paramètre, l'option Par conséquent, le composant dans Vue est une fonction, mais. ce n'est encore qu'une option avant son introduction. Objet, il est donc facile de comprendre qu'un composant dans Vue n'est qu'un objet au début, c'est-à-dire qu'un composant d'ordre supérieur est une fonction qui accepte un objet pur et renvoie un nouvel objet pur

export default function Console (BaseComponent) {
  return {
    template: '0040ddd46d317a97de61e65cb3442a89',
    components: {
      wrapped: BaseComponent
    },
    mounted () {
      console.log('haha')
    }
  }
}

Ici, la console est un composant d'ordre élevé qui accepte un paramètre. BaseComponent est le composant transmis, renvoie un nouveau composant, utilise BaseComponent comme sous-composant du nouveau composant et définit la fonction hook dans monté pour imprimer haha. Nous pouvons faire la même chose que les mixins. Nous n'avons pas modifié le sous-composant Base. Ici, $listeners $attrs transmet en fait de manière transparente les accessoires et les événements. Cela résout-il vraiment parfaitement le problème ? Non, tout d'abord, l'option template ne peut être utilisée que dans la version complète de Vue, pas dans la version runtime, donc à tout le moins nous devrions utiliser la fonction render (render) au lieu du template (template)

Console .js

export default function Console (BaseComponent) {
  return {
    mounted () {
      console.log('haha')
    },
    render (h) {
      return h(BaseComponent, {
        on: this.$listeners,
        attrs: this.$attrs,
      })
    }
  }
}

Nous avons réécrit le modèle en fonction de rendu. Il semble qu'il n'y ait pas de problème, mais en fait, il y a toujours un problème dans le code ci-dessus, le composant BaseComponent ne peut toujours pas recevoir d'accessoires. passer des attrs dans le deuxième paramètre de la fonction h ? Pourquoi est-ce que je ne peux pas le recevoir ? Bien sûr, vous ne pouvez pas le recevoir. Attrs fait référence à des attributs qui n'ont pas été déclarés comme accessoires, vous devez donc ajouter des paramètres d'accessoires dans la fonction de rendu :

export default function Console (BaseComponent) {
  return {
    mounted () {
      console.log('haha')
    },
    render (h) {
      return h(BaseComponent, {
        on: this.$listeners,
        attrs: this.$attrs,
        props: this.$props
      })
    }
  }
}

Ensuite, cela ne fonctionne toujours pas. Les accessoires ici sont l'objet d'ordre élevé du composant, mais le composant d'ordre élevé ne déclare pas d'accessoires, nous devons donc déclarer un autre accessoire

export default function Console (BaseComponent) {
  return {
    mounted () {
      console.log('haha')
    },
    props: BaseComponent.props,
    render (h) {
      return h(BaseComponent, {
        on: this.$listeners,
        attrs: this.$attrs,
        props: this.$props
      })
    }
  }
}

ok Un composant d'ordre élevé similaire est terminé, mais il peut toujours l'être. terminé. Nous implémentons uniquement la transmission transparente des accessoires et la transmission transparente des événements emmmmm, il ne reste que le slot. Nous modifions le composant Base pour ajouter un slot nommé et un slot par défaut Base.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    0817b6bf5b3183ab1a144d078c45fdbcprops: {{test}}54bdf357c58b8a65c66d7c19c8e4d114
    e8dddc28d3bfad1f72ef15bb99cfb297 ce4ce005a24c94d9b4e4a39d8a2161ed7971cf77a46923278913ee247bc958ee
    e388a4556c0f65e1904146cc1a846bee===========94b3e26ee717c64999d7867364b1b4a3
    58cb293b8600657fad49ec2c8d37b47238b537b6886351ac721d89624ba185ca 4842836e9b56128d85f8ca400a7b33ba
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
 
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  ...
}
2cacc6d41bbb37262a98f745aa00fbf0

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    88d574120e9e0d5bf9eb3bcd60be7003
      9d8e5d4a2d5c644920def765daa3de8aBaseComponent slot2e9b454fa8428549ca2e64dfac4625cd
      e388a4556c0f65e1904146cc1a846beedefault slot94b3e26ee717c64999d7867364b1b4a3
    686fde5332128d14fa2aa6dd6ebb0c77
    df1b898a74c042562246884f2d946ef4
      9d8e5d4a2d5c644920def765daa3de8aEnhancedComponent slot2e9b454fa8428549ca2e64dfac4625cd
      e388a4556c0f65e1904146cc1a846beedefault slot94b3e26ee717c64999d7867364b1b4a3
    c29ea36a6f271e266acde995154dc3a8
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
 
3f1c4e4b6b16bbbd69b2ee476dc4f83a
  import Base from './Base.vue'
  import hoc from './Console.js'
 
  const wrapBase = Console(Base)
 
  export default {
    components: {
      Base,
      wrapBase
    }
  }
2cacc6d41bbb37262a98f745aa00fbf0

Le résultat de l'exécution ici est que le. les slots dans wrapBase ont disparu, nous devons donc changer le composant de haut niveau

function Console (BaseComponent) {
  return {
    mounted () {
      console.log('haha')
    },
    props: BaseComponent.props,
    render (h) {
 
      // 将 this.$slots 格式化为数组，因为 h 函数第三个参数是子节点，是一个数组
      const slots = Object.keys(this.$slots)
        .reduce((arr, key) => arr.concat(this.$slots[key]), [])
 
      return h(BaseComponent, {
        on: this.$listeners,
        attrs: this.$attrs,
        props: this.$props
      }, slots) // 将 slots 作为 h 函数的第三个参数
    }
  }
}

À ce stade, le contenu du slot est effectivement rendu, mais l'ordre n'est pas correct et tous les composants de haut niveau sont rendus jusqu'à la fin. . En fait, Vue prendra en compte les facteurs de portée lors du traitement des emplacements nommés. Tout d'abord, Vue compilera le modèle dans une fonction de rendu (render). Par exemple, le modèle suivant :

dc6dce4a544fdca2df29d5ac0ea9906b
  74997f6adba13580e4e439db54218f0dBase slot94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

sera compilé dans la fonction de rendu suivante :

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", [
    _c("div", {
      attrs: { slot: "slot1" },
      slot: "slot1"
    }, [
      _vm._v("Base slot")
    ])
  ])
}

. Observez la fonction de rendu ci-dessus. Nous avons constaté que le DOM ordinaire crée le VNode correspondant via la fonction _c. Maintenant, nous modifions le modèle En plus du DOM ordinaire, le modèle comporte également les composants suivants :

dc6dce4a544fdca2df29d5ac0ea9906b
  88d574120e9e0d5bf9eb3bcd60be7003
    74997f6adba13580e4e439db54218f0dBase slot94b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beedefault slot94b3e26ee717c64999d7867364b1b4a3
  686fde5332128d14fa2aa6dd6ebb0c77
16b28748ea4df4d9c2150843fecfba68

sa fonction de rendu

.

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _c("Base", [
        _c("p", { attrs: { slot: "slot1" }, slot: "slot1" }, [
          _vm._v("Base slot")
        ]),
        _vm._v(" "),
        _c("p", [_vm._v("default slot")])
      ])
    ],
  )
}

我们发现无论是普通DOM还是组件，都是通过 _c 函数创建其对应的 VNode 的 其实 _c 在 Vue 内部就是 createElement 函数。createElement 函数会自动检测第一个参数是不是普通DOM标签如果不是普通DOM标签那么 createElement 会将其视为组件，并且创建组件实例,注意组件实例是这个时候才创建的 但是创建组件实例的过程中就面临一个问题：组件需要知道父级模板中是否传递了 slot 以及传递了多少，传递的是具名的还是不具名的等等。那么子组件如何才能得知这些信息呢？很简单，假如组件的模板如下

dc6dce4a544fdca2df29d5ac0ea9906b
  88d574120e9e0d5bf9eb3bcd60be7003
    74997f6adba13580e4e439db54218f0dBase slot94b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beedefault slot94b3e26ee717c64999d7867364b1b4a3
  686fde5332128d14fa2aa6dd6ebb0c77
16b28748ea4df4d9c2150843fecfba68

父组件的模板最终会生成父组件对应的 VNode，所以以上模板对应的 VNode 全部由父组件所有，那么在创建子组件实例的时候能否通过获取父组件的 VNode 进而拿到 slot 的内容呢？即通过父组件将下面这段模板对应的 VNode 拿到

88d574120e9e0d5bf9eb3bcd60be7003
    74997f6adba13580e4e439db54218f0dBase slot94b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beedefault slot94b3e26ee717c64999d7867364b1b4a3
  686fde5332128d14fa2aa6dd6ebb0c77

如果能够通过父级拿到这段模板对应的 VNode，那么子组件就知道要渲染哪些 slot 了，其实 Vue 内部就是这么干的，实际上你可以通过访问子组件的 this.$vnode 来获取这段模板对应的 VNode

this.$vnode 并没有写进 Vue 的官方文档

子组件拿到了需要渲染的 slot 之后进入到了关键的一步，这一步就是导致高阶组件中透传 slot 给 Base组件 却无法正确渲染的原因 children的VNode中的context引用父组件实例 其本身的context也会引用本身实例 其实是一个东西

console.log($vnode.context===this.$vnode.componentOptions.children[0].context) //ture

而 Vue 内部做了一件很重要的事儿，即上面那个表达式必须成立，才能够正确处理具名 slot，否则即使 slot 具名也不会被考虑，而是被作为默认插槽。这就是高阶组件中不能正确渲染 slot 的原因

即 高阶组件中 本来时父组件和子组件之间插入了一个组件(高阶组件),而子组件的 this.$vnode其实是高阶组件的实例，但是我们将slot透传给子组件,slot里 VNode 的context实际引用的还是父组件 所以

console.log(this.vnode.context === this.vnode.componentOptions.children[0].context) // false

最终导致具名插槽被作为默认插槽，从而渲染不正确。

决办法也很简单，只需要手动设置一下 slot 中 VNode 的 context 值为高阶组件实例即可

function Console (Base) {
  return {
    mounted () {
      console.log('haha')
    },
    props: Base.props,
    render (h) {
      const slots = Object.keys(this.$slots)
        .reduce((arr, key) => arr.concat(this.$slots[key]), [])
        // 手动更正 context
        .map(vnode => {
          vnode.context = this._self //绑定到高阶组件上
          return vnode
        })
 
      return h(WrappedComponent, {
        on: this.$listeners,
        props: this.$props,
        attrs: this.$attrs
      }, slots)
    }
  }
}

说明白就是强制把slot的归属权给高阶组件 而不是 父组件 通过当前实例 _self 属性访问当实例本身，而不是直接使用 this，因为 this 是一个代理对象

【相关推荐：vuejs视频教程、web前端开发】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!