Vue3에서 구성 요소 수준 기본 클래스를 구현하는 방법

Use mixins and Extensions

vue3은 mixin과 Extension을 제공하지만 시도한 후에 이 두 가지 방법은 순수 OptionAPI만 지원한다는 것을 알았습니다. 그러나 set 설정에서 반환의 반응은 완전히 유효하지 않습니다. 설정이 인식되지 않습니다.
그래서 이 방법은 첫 번째 방법에만 사용할 수 있습니다.

훅(함수, 클래스)을 활용하세요

공식에서 제공하지 않으니 스스로 알아봅시다. 먼저 구성 요소 코드(두 번째 경우)를 살펴보겠습니다.

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

defineComponent 메서드는 이름, 구성 요소, 소품, 설정 등과 같은 몇 가지 특정 속성을 가져야 하는 개체를 받습니다.
즉, 그러한 객체를 반환하는 함수를 만들 수 있습니다.
예를 들어 먼저 js(또는 ts) 파일을 만들어 보겠습니다.

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

템플릿 모드와 약간 비슷합니다.

이름과 콜백 함수, 소품, 컨텍스트를 매개변수로 전달합니다. 내부 멤버를 매개변수로 전달할 수도 있습니다.
이렇게 간단한 기본 클래스가 생성되는데, 함수가 보기에 좋지 않다고 생각되면 클래스로 변경하면 됩니다.

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

수업이 끝난 후 하위수업을 설정할 수도 있는데, 조금 번거로운 느낌이 듭니다. 간단히 말해서, 그것은 어쨌든 달성될 수 있다.

스크립트 설정으로 해야 할 일

위 메서드도 순수 구성 API를 지원할 수 있어야 하지만, DefineProps와 DefineEmits는 일반적인 js 함수가 아니라 일종의 "매크로"라는 점에 약간의 문제가 있습니다.
공식 웹사이트의 설명 인용:

defineProps와 DefineEmits는 5101c0cdbdc49998c642c71f6b6410a8에서만 사용할 수 있는 컴파일러 매크로입니다. 가져올 필요가 없으며 d7b7247d8029f2c18bf139c9b4de217b 프로세스와 함께 컴파일됩니다.
즉, DefineXXX 시리즈는 5101c0cdbdc49998c642c71f6b6410a8 태그 내에서만 인식됩니다. 별도의 js 파일에 있으면 인식되지 않습니다.

이로 인해 DefineProps 및 DefineEmits를 기본 클래스로 만들 수 없게 됩니다.
필수 기본 클래스에 DefineProps 및 DefineEmits가 포함되지 않은 경우에도 별도의 js 파일에서 함수나 클래스를 정의할 수 있습니다(즉, 포괄적인 후크 만들기).

저는 아직 Props를 정의하고 Emits를 정의하는 솔루션을 생각하지 않았습니다. (두 번째 방법만)

위 내용은 Vue3에서 구성 요소 수준 기본 클래스를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!