vue3은 mixin과 Extension을 제공하지만 시도한 후에 이 두 가지 방법은 순수 OptionAPI만 지원한다는 것을 알았습니다. 그러나 set 설정에서 반환의 반응은 완전히 유효하지 않습니다. 설정이 인식되지 않습니다.
그래서 이 방법은 첫 번째 방법에만 사용할 수 있습니다.
공식에서 제공하지 않으니 스스로 알아봅시다. 먼저 구성 요소 코드(두 번째 경우)를 살펴보겠습니다.
<template>
<!--模板-->
举例
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'ui-core-',
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는
저자별 최신 기사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
