How to implement component-level base classes in Vue3
Use mixins and extends
vue3 provides mixins and extends, but after trying it, I found that these two methods only support pure OptionAPI. The set data will be recognized, but the reactive of return in the set setup is completely Invalid, setup is not executed.
So this method can only be used in the first method.
Use hooks (function, class)
Since the official does not provide it, let’s find a way ourselves. Let's first observe the component code (second case):
<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 method receives an object, which needs to have several specific attributes, such as name, components, props, setup, etc.
In other words, we can make a function to return such an object.
For example, let's create a js (or ts) file first:
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 } } } }
It's a bit like template mode.
Pass in name and a callback function, props, and context as parameters. Internal members can also be passed as parameters.
Such a simple base class is created. If you think function is not good-looking, you can change it to class.
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 } } } }
After having class, you can also set subclasses, but it feels a bit cumbersome. In short, it can be achieved anyway.
What to do with script setup
The above method should also support pure composition API, but there is a slight problem. defineProps and defineEmits are not ordinary js functions, but a kind of "macro" .
Quoting the explanation from the official website:
defineProps and defineEmits are compiler macros that can only be used in
![]()
Hot AI Tools
![]()
Undresser.AI Undress
AI-powered app for creating realistic nude photos
![]()
AI Clothes Remover
Online AI tool for removing clothes from photos.
![]()
Undress AI Tool
Undress images for free
![]()
Clothoff.io
AI clothes remover
![]()
AI Hentai Generator
Generate AI Hentai for free.
![]()
Hot Article
Assassin's Creed Shadows: Seashell Riddle Solution3 weeks ago By DDDWhat's New in Windows 11 KB5054979 & How to Fix Update Issues2 weeks ago By DDDWhere to find the Crane Control Keycard in Atomfall3 weeks ago By DDDSaving in R.E.P.O. Explained (And Save Files)1 months ago By 尊渡假赌尊渡假赌尊渡假赌![]()
Hot Tools
![]()
Notepad++7.3.1
Easy-to-use and free code editor
![]()
SublimeText3 Chinese version
Chinese version, very easy to use
![]()
Zend Studio 13.0.1
Powerful PHP integrated development environment
![]()
Dreamweaver CS6
Visual web development tools
![]()
SublimeText3 Mac version
God-level code editing software (SublimeText3)
![]()
Hot Topics
CakePHP Tutorial1386
52

vue3+vite:src uses require to dynamically import images and error reports and solutions. vue3+vite dynamically imports multiple images. If vue3 is using typescript development, require will introduce image errors. requireisnotdefined cannot be used like vue2 such as imgUrl:require(' .../assets/test.png') is imported because typescript does not support require, so import is used. Here is how to solve it: use awaitimport

tinymce is a fully functional rich text editor plug-in, but introducing tinymce into vue is not as smooth as other Vue rich text plug-ins. tinymce itself is not suitable for Vue, and @tinymce/tinymce-vue needs to be introduced, and It is a foreign rich text plug-in and has not passed the Chinese version. You need to download the translation package from its official website (you may need to bypass the firewall). 1. Install related dependencies npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. Download the Chinese package 3. Introduce the skin and Chinese package. Create a new tinymce folder in the project public folder and download the

To achieve partial refresh of the page, we only need to implement the re-rendering of the local component (dom). In Vue, the easiest way to achieve this effect is to use the v-if directive. In Vue2, in addition to using the v-if instruction to re-render the local dom, we can also create a new blank component. When we need to refresh the local page, jump to this blank component page, and then jump back in the beforeRouteEnter guard in the blank component. original page. As shown in the figure below, how to click the refresh button in Vue3.X to reload the DOM within the red box and display the corresponding loading status. Since the guard in the component in the scriptsetup syntax in Vue3.X only has o

Vue implements the blog front-end and needs to implement markdown parsing. If there is code, it needs to implement code highlighting. There are many markdown parsing libraries for Vue, such as markdown-it, vue-markdown-loader, marked, vue-markdown, etc. These libraries are all very similar. Marked is used here, and highlight.js is used as the code highlighting library. The specific implementation steps are as follows: 1. Install dependent libraries. Open the command window under the vue project and enter the following command npminstallmarked-save//marked to convert markdown into htmlnpmins

After the vue3 project is packaged and published to the server, the access page displays blank 1. The publicPath in the vue.config.js file is processed as follows: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

The final effect is to install the VueCropper component yarnaddvue-cropper@next. The above installation value is for Vue3. If it is Vue2 or you want to use other methods to reference, please visit its official npm address: official tutorial. It is also very simple to reference and use it in a component. You only need to introduce the corresponding component and its style file. I do not reference it globally here, but only introduce import{userInfoByRequest}from'../js/api' in my component file. import{VueCropper}from'vue-cropper&

vue3+ts+axios+pinia realizes senseless refresh 1. First download aiXos and pinianpmipinia in the project--savenpminstallaxios--save2. Encapsulate axios request-----Download js-cookienpmiJS-cookie-s//Introduce aixosimporttype{AxiosRequestConfig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

Preface Whether it is vue or react, when we encounter multiple repeated codes, we will think about how to reuse these codes instead of filling a file with a bunch of redundant codes. In fact, both vue and react can achieve reuse by extracting components, but if you encounter some small code fragments and you don’t want to extract another file, in comparison, react can be used in the same Declare the corresponding widget in the file, or implement it through renderfunction, such as: constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
