【vue3】 Encapsulate custom global plug-ins
primary vue2 Method
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import plugin from './···/plugin/index'
// Install custom plug-ins
Vue.use(plugin);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
index.js
import Plugin from "./Plugin";
const plugin = {};
/**
* Vue: stay main.js in Vue.use Automatically passed in when vue Instance as argument
* At the same time, it will automatically execute install function
*/
plugin.install = function(Vue) {
//1、 Create a component constructor
const pluginConstructor = Vue.extend(Plugin);
//2、new The way , According to the component constructor , You can create a component object
const plugin = new pluginConstructor();
//3、 The component object , Manually mount to an element
plugin.$mount(document.createElement("div"));
//4、plugin.$el Corresponding to the above mounted div
document.body.appendChild(plugin.$el);
//5、 Definition Vue.$plugin Global access to
Vue.prototype.$plugin = plugin;
};
export default plugin; // take plugin export
plugin.vue( Custom components )
<template>
<div>
</div>
</template>
<script>
export default {
name: "Plugin",
}
</script>
<style scoped>
</style>
vue3 And vue2 identical , Only the method of execution is different .
vue3 Method
difference
- use(plugin) Automatically call install Function time
vue2: Auto in Vue example
vue3: Auto in App Application example
- Mount components
vue2: Vue.extend(plugin) + Constructor instantiation + mount
vue3: createApp(plugin) + mount
- Define global access
vue2: Vue.prototype.$plugin
vue3: app.config.globalProperties.$plugin
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import plugin from "···/plugin/index";
createApp(App).use(store).use(router).use(plugin).mount('#app');
index.js
import Plugin from "./Plugin";
import {createApp} from 'vue'
const plugin = {};
plugin.install = function(app) {
//1、 Instantiate and bind components
const plugin = createApp(Plugin);
const instance = plugin.mount(document.createElement("div"));
//2. To mount Node Add to body in
document.body.appendChild(instance.$el);
//3、 Define global
app.config.globalProperties.$plugin = instance;
};
export default plugin;
The whole idea is the same , so vue3 More encapsulation , Just less code .
【vue3】 More articles on encapsulating custom global plug-ins
- vue3 series ：vue3.0 Custom global shell layer V3Layer|vue3.x pc Desktop pop-up components
be based on Vue3.0 Development PC Desktop custom dialog components V3Layer. I shared one two days ago vue3.0 The mobile side ejects the layer component , Today we share the latest development vue3.0 edition pc End pop-up components . V3Layer A use of vue3.0 ...
- elementary analysis vue Encapsulate custom plug-ins
In the use of vue In the process of , Often used Vue.use, But most people know little about it , I don't know what I did when I called , therefore , This paper gives a brief overview in vue in , How to encapsulate custom plug-ins . Before we start , Let's add , Actually use vue encapsulation ...
- Use vue3 The custom instructions for element-plus Of el-dialog Add drag function
element-plus Provided el-dialog The dialog is very powerful , It's just a fly in the ointment. You can't change the position by dragging , A little regret , So what to do ? We can go through vue To implement a drag and drop dialog box ...
- Customize Angular plug-in unit - Website user guide
Recently, due to the major revision of the project , In order to enable users to adapt to this new revision , So... Is introduced into the system “ User guidance ” function , For users who first enter the system, some simple use training training. For most websites , This is a very common function . the ...
- 【jQuery Based on learning 】08 Write custom jQuery plug-in unit
Purpose : although jQuery All kinds of functions are perfect , But we still have to learn to write plug-ins ourselves . In this way, we can encapsulate some exclusive code that is often used in projects , In order to maintain and improve the development efficiency in the later period . jQuery Type of plug-in : Encapsulate the object side ...
- mvc Custom global exception handling
Exception handling is an essential part of any website , How to display effectively , Record , The most important problem is to transmit abnormal information . This article will be based on html2cancas Screenshot function , Realization mvc Custom global exception handling . Let's take a look at the final results : ...
- Customize jQuery plug-in unit Step by Step
1.1.1 Abstract With the separation of front-end and back-end technologies , Internet companies are interested in Mobile First Ideas are all in a rush , In order to solve the display effect of web pages on different mobile devices , One of the solutions is Responsive Desig ...
- Customize Cordova plug-in unit （ The basic chapter ）
cordova Custom plug in Be careful : Store custom cordova The plug-in directory can't have spaces, which may report an error cordova Installation download node.js, After installation, you can use it on the command line node and npm. install cordova Use ...
- Customize Cordova plug-in unit （ The basic chapter ）
cordova Custom plug in Be careful : Store custom cordova The plug-in directory can't have spaces, which may report an error cordova Installation download node.js, After installation, you can use it on the command line node and npm. install cordova Use ...
- hold axios Encapsulated in the vue The plug-in USES
Preface since Vue2.0 I recommend you to use axios Start ,axios Be known by more and more people . Use axios It's relatively easy for us to make a request , however axios No encapsulation reuse , The project is getting bigger and bigger , Caused code redundancy ...
Random recommendation
- background-position （ turn ）
http://blog.csdn.net/JeamKing/article/details/5617088 notes : This is someone else's blog link address See this link for specific effect pictures grammar :background-po ...
- Export... From a database excel report form
Usually, you need to export the datasets or other lists in the background database excel report form , Here we mainly quote Apose.cells dll Class library , (1) Go straight to the main code : protected void txtExport_Cl ...
- DevExpress Set in PanelControl Background approach
The first, of course, is to set BackColor The color of the , However, it is often not reflected after setting , This is Dev The benefits are not good , Then we need to define two properties ourselves 1. Set up LookAndFeel Under the style by Flat or UtralFl ...
- build Android The steps of the project and its first Android program
1. Android system architecture 1> The bottom is Linux System 2> Function library layer from C or C++ Written 3>Application frameWork Application framework layer 4> The top layer is the application layer 2.JVM And DVM Introduce ...
- ubuntu14.04 Service version /etc/init.d/smbd restart Invalid solution
Just installed ubuntu14.04 End of configuration smbd Find out service perhaps /etc/init.d/smbd restart No output is displayed , It didn't work echo $? Output 1, Check the script and find if init_is_ ...
- .Net Programmers learn to use Oracle series (5)： Three data types
<.Net Programmers learn to use Oracle series : Navigation directory > Outline of this article 1.Oracle Overview of data types 2. Character type 2.1. Character set & NLS 2.2. Two common strings 2.3.NCHAR ...
- 【bootstrap】 Time selector datetimepicker and daterangepicker
stay bootstrap There are two kinds of time selectors in :dateTimePicker and dateRangePicker 1.dateTimePicker It seems to be an official plug-in : Documents needed : <link rel= ...
- Three level cascade query of province name and code （ Ensure that the name does not duplicate ） Of SQL sentence
Three level cascade query of province name and code ( Ensure that the name does not duplicate ) Of SQL sentence 1. Province . City and county level database tables 2.SQL sentence SELECT DISTINCT t.`province_name`,t.`province_co ...
- OJ topic ： Invert a number to output
Title Description : Enter a number , If num = 12345 , Output 54321, And so on . Code implementation : ) ; }
- use Matlab Carry out partial fractional expansion
[r p k]=residue[num,den] for example H(s)=(2s3+5s2+3s+6)/(s3+6s2+11s+6) num=[2 5 3 6]; den=[1 6 11 6]; [r p k] ...
