Apakah komponen pesanan tinggi vue?

Dalam Vue, komponen tertib tinggi sebenarnya ialah fungsi tertib tinggi, iaitu fungsi yang mengembalikan fungsi komponen. Ciri-ciri komponen tertib tinggi: 1. Ia adalah fungsi tulen tanpa kesan sampingan, dan komponen asal tidak boleh diubah suai, iaitu komponen asal tidak boleh diubah 2. Ia tidak mengambil berat tentang data (props); lulus, dan komponen yang baru dijana tidak mengambil berat tentang sumber data 3. Alat peraga yang diterima harus dihantar ke komponen yang dibungkus, iaitu, prop komponen asal terus kepada komponen pembungkusan; komponen pesanan boleh menambah, memadam dan mengubah suai prop sepenuhnya.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Pengenalan kepada komponen tertib tinggi

Pemahaman komponen tertib tinggi vue Dalam React, komponen dilaksanakan dengan kod yang digunakan semula, manakala dalam Vue, ia dilaksanakan dengan mixins, dan Dokumentasi rasmi juga kekurangan beberapa konsep komponen tertib tinggi, kerana sukar untuk melaksanakan komponen tertib tinggi dalam Vue dan tidak semudah React Malah, mixin dalam Vue juga digantikan dengan mixin sebahagian daripada kod sumber, saya mempunyai pemahaman yang lebih mendalam tentang Pemahaman Vue

Apa yang dipanggil komponen tertib tinggi sebenarnya adalah fungsi tertib tinggi, iaitu fungsi yang mengembalikan fungsi komponen melaksanakannya dalam Vue? Ambil perhatian bahawa komponen tertib tinggi mempunyai ciri berikut

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

Contoh komponen tertib tinggi

Base.vue

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

Komponen Vue terutamanya mempunyai tiga mata: prop, acara dan slot . Untuk komponen komponen Base, ia menerima prop jenis angka, iaitu ujian, dan mencetuskan acara tersuai Nama acara ialah: Klik asas, tanpa slot. Kami akan menggunakan komponen seperti ini:

Kini kami memerlukan komponen komponen asas untuk mencetak ayat: haha ​​​​setiap kali ia dipasang Pada masa yang sama, ini mungkin memerlukan banyak komponen. jadi mengikut kaedah mixin, kita Anda boleh melakukan ini, mula-mula tentukan mixin

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

dan kemudian campurkan consoleMixin dalam komponen 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

Apabila menggunakan komponen Base dalam ini Caranya, ia akan dicetak setiap kali pemasangan selesai Haha, tetapi kini kita perlu menggunakan komponen tertib lebih tinggi untuk mencapai fungsi yang sama Ingat takrif komponen tertib tinggi: terima komponen sebagai parameter dan kembalikan yang baharu komponen. Jadi apa yang perlu kita fikirkan pada masa ini ialah, komponen dalam Vue Apakah itu? Komponen dalam Vue adalah fungsi, tetapi itu adalah hasil akhir Sebagai contoh, definisi komponen kami dalam komponen fail tunggal sebenarnya adalah objek pilihan biasa, seperti berikut:

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

Bukankah ini tulen. objek

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

Apakah Base di sini? Ia adalah objek JSON, dan apabila ia ditambahkan pada komponen komponen, Vu akhirnya akan membina pembina contoh dengan parameter ini, iaitu, pilihan , jadi komponen dalam Vue Ia hanya fungsi, tetapi ia masih hanya objek pilihan sebelum ia diperkenalkan, jadi mudah untuk memahami bahawa komponen dalam Vue hanyalah objek pada mulanya, iaitu, susunan yang lebih tinggi komponen ialah fungsi yang menerima objek tulen dan mengembalikan objek tulen baharu

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

Di sini Console ialah komponen tertib lebih tinggi Ia menerima parameter BaseComponent, iaitu komponen yang diluluskan, mengembalikan komponen baharu , menggunakan BaseComponent sebagai subkomponen bagi komponen baharu dan menetapkan fungsi cangkuk dalam mounted to print haha menghantar alat peraga dan acara Adakah ini benar-benar menyelesaikan masalah dengan sempurna? Tidak, pertama sekali, pilihan templat hanya boleh digunakan dalam versi penuh Vue, bukan dalam versi masa jalan, jadi sekurang-kurangnya kita harus menggunakan fungsi render (render) dan bukannya templat (template)

konsol tidak dapat menerima props. Mengapakah anda tidak dapat menerimanya? Sudah tentu anda tidak boleh menerimanya. Attrs merujuk kepada atribut yang belum diisytiharkan sebagai prop, jadi anda perlu menambah parameter prop dalam fungsi pemaparan:

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

Kemudian ini masih tidak berfungsi. Prop sentiasa objek kosong. Prop di sini ialah objek komponen tertib tinggi, tetapi komponen tertib tinggi tidak mengisytiharkan prop, jadi anda perlu mengisytiharkan prop lain

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

ok yang serupa -komponen pesanan selesai, tetapi ia masih boleh disiapkan setiap kali Kami hanya melaksanakan penghantaran telus props dan penghantaran telus acara, emmmmm, hanya slot yang tinggal Kami mengubah suai komponen asas untuk menambah slot bernama dan lalai slot Base.vue

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
      })
    }
  }
}

Hasil pelaksanaan di sini ialah Slot dalam wrapBase telah hilang, jadi kami perlu menukar komponen peringkat tinggi

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

Pada masa ini, slot kandungan memang diberikan, tetapi susunannya tidak betul, dan semua komponen tertib tinggi diberikan hingga akhir. . Malah, Vue akan mempertimbangkan faktor skop apabila memproses slot yang dinamakan Pertama, Vue akan menyusun templat ke dalam fungsi pemaparan Sebagai contoh, templat berikut:

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 函数的第三个参数
    }
  }
}

akan dihimpunkan ke dalam yang berikut. fungsi rendering:

dc6dce4a544fdca2df29d5ac0ea9906b
  74997f6adba13580e4e439db54218f0dBase slot94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

Memerhatikan fungsi rendering di atas, kami mendapati bahawa DOM biasa mencipta VNode yang sepadan melalui fungsi _c. Kini kami mengubah suai templat Selain DOM biasa, templat juga mempunyai komponen, seperti berikut:

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")
    ])
  ])
}

fungsi pemaparannya

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前端开发】

Atas ialah kandungan terperinci Apakah komponen pesanan tinggi vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!