Bagaimana untuk melaksanakan kelas asas peringkat komponen dalam Vue3

Gunakan mixin dan extends

vue3 menyediakan mixin dan extends, tetapi selepas mencubanya, saya mendapati bahawa kedua-dua kaedah ini hanya menyokong OptionAPI tulen Data set akan dikenali, tetapi reaktif pulangan dalam set persediaan tidak sah sepenuhnya, persediaan tidak dilaksanakan.
Jadi kaedah ini hanya boleh digunakan dalam kaedah pertama.

Gunakan cangkuk (fungsi, kelas)

Memandangkan ia tidak disediakan secara rasmi, mari kita fikirkan sendiri. Mari kita perhatikan kod komponen (huruf kedua):

<template>
  <!--模板-->
  举例
</template>
<script lang="ts">
  import { defineComponent } from &#39;vue&#39;
  export default defineComponent({
    name: &#39;ui-core-&#39;,
    components: {
      // 注册共用组件
    },
    props: {
      // 定义共用属性
    },
    setup(props, context) {
      // 各种共用操作
      _logger()
      _setTitle()
      // 共用成员
      const foo = reactive ({})
      return {
        foo
      }
    }
  })
</script>

kaedah defineComponent menerima objek dan objek itu perlu mempunyai beberapa atribut khusus, seperti nama, komponen, prop, persediaan, dsb.
Dengan kata lain, kita boleh membuat fungsi untuk mengembalikan objek sedemikian.
Sebagai contoh, mari buat fail js (atau ts) dahulu:

export function base (name, callback) {
  return {
    name: 'ui-' + name,
    components: {
      // 注册共用组件
    },
    props: {
      // 定义共用属性
    },
    setup(props, context) {
      // 各种共用操作
      _logger()
      _setTitle()
      // 共用成员
      const foo = reactive ({})
      // 执行其他操作
      const re = callback(props, context)
      return {
        foo,
        ...re
      }
    }
  }
}

Ia agak seperti mod templat.

Masukkan nama dan fungsi panggil balik, prop dan konteks sebagai parameter. Ahli dalaman juga boleh diluluskan sebagai parameter.
Kelas asas sebegitu mudah dicipta Jika anda rasa fungsi itu tidak cantik, anda boleh menukarnya kepada kelas.

export default class BaseComponent {
  name: string
  components: any
  props: any
  setup: any
  constructor (name: string, callback: (props: any, context: any) => any) {
    this.name = name
    this.components = {}
    this.props = {}
    this.setup = (props: any, context: any) => {
      // 各种共用操作
      _logger()
      _setTitle()
      // 执行其他操作
      const re = callback(props, context)
      return {
        ...re
      }
    }
  }
}

Selepas mengadakan kelas, anda juga boleh menetapkan subkelas, tetapi ia terasa agak menyusahkan. Pendek kata, ia boleh dicapai pula.

Apa yang perlu dilakukan dengan persediaan skrip

Kaedah di atas juga harus menyokong API komposisi tulen, tetapi terdapat sedikit masalah defineProps dan defineEmits bukan fungsi js biasa, tetapi sejenis "makro " .
Memetik penjelasan daripada laman web rasmi:

defineProps dan defineEmits ialah makro pengkompil yang hanya boleh digunakan dalam be609634581fe1bbacded492a56a3eb3. Ia tidak perlu diimport dan akan disusun bersama-sama dengan 1c42a7a4de0e17296caa0bf930b45dfd
Maksudnya, siri defineXXX hanya akan dikenali di dalam teg c7c7957f9281cf3b453e6f7f07b7fe53

Ini menyebabkan defineProps dan defineEmits tidak dapat dijadikan kelas asas.
Jika kelas asas yang diperlukan tidak melibatkan defineProps dan defineEmits, anda masih boleh mentakrifkan fungsi atau kelas dalam fail js yang berasingan (iaitu, membuat cangkuk komprehensif).

Saya masih belum mengetahui cara untuk mendefineProps dan defineEmits. (Hanya cara kedua)

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kelas asas peringkat komponen dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!