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

<template>
  <div>
    <p>props: {{test}}</p>
  </div>
</template>
<script>
export default {
  name: &#39;Base&#39;,
  props: {
    test: Number
  },
  methods: {
    Click () {
      this.$emit(&#39;Base-click&#39;)
    }
  }
}
</script>

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:

<template>
  <div>
    <p>props: {{test}}</p>
  </div>
</template>
<script>
export default {
  name: &#39;Base&#39;,
  props: {
    test: Number
  },
  mixins: [ consoleMixin ],
  methods: {
    Click () {
      this.$emit(&#39;Base-click&#39;)
    }
  }
}
</script>

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: '<wrapped></wrapped>',
    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

<template>
  <div>
    <span>props: {{test}}</span>
    <slot></slot> <!-- 具名插槽 -->
    <p>===========</p>
    <slot><slot></slot> <!-- 默认插槽 -->
  </slot>
</div>
</template>
 
<script>
export default {
  ...
}
</script>

<template>
  <div>
    <base>
      <h2 id="BaseComponent-slot">BaseComponent slot</h2>
      <p>default slot</p>
    
    <wrapbase>
      <h2 id="EnhancedComponent-slot">EnhancedComponent slot</h2>
      <p>default slot</p>
    </wrapbase>
  </div>
</template>
 
<script>
  import Base from &#39;./Base.vue&#39;
  import hoc from &#39;./Console.js&#39;
 
  const wrapBase = Console(Base)
 
  export default {
    components: {
      Base,
      wrapBase
    }
  }
</script>

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:

<div>
  <p>Base slot</p>
</div>

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 以及传递了多少，传递的是具名的还是不具名的等等。那么子组件如何才能得知这些信息呢？很简单，假如组件的模板如下

<div>
  <base>
    <p>Base slot</p>
    <p>default slot</p>
  
</div>

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

<base>
    <p>Base slot</p>
    <p>default slot</p>
  

如果能够通过父级拿到这段模板对应的 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!