一、版本
"dependencies": {
"core-js": "^3.8.3",
"vue": "^3.2.13"
},
二、 Vue3全局挂载介绍
这里我们做了一个简单的例子，首先我提供了一个待挂载的JS类：
名为student.js
/**
* 学习信息获取工具
*/
const student = {
student:{
id:'', // 学生ID
name:'', // 学生姓名
age:'' // 学生年龄
},
student: (s) => {
student.id =s.id;
student.name = s.name;
student.age = s.age;
},
get: () => {
return student;
},
print: () => {
console.log(student);
}
};
export default student;
一个学生信息类，不难理解，代码很简单。
为了方便演示，我用刚刚创建好的Vue3项目演示。
写一个集体挂载JS类
名为：install.js
/**
* 集中安装类（挂载）
*/
import $student from './student';
export default {
install: (app) => {
app.config.globalProperties['$student'] = $student;
}
}
将student.js加进来
然后在main.js中引入进来，使用它。
import {createApp} from 'vue'
import App from './App.vue'
import install from './plugins/install'
const app = createApp(App);
app.use(install)
.mount('#app')
然后在App.vue中使用
<template>
<span>挂载演示例子</span>
</template>
<script>
import { getCurrentInstance } from 'vue';
export default {
name: 'App',
components: {},
setup() {
console.log('----- setup -------');
const { proxy } = getCurrentInstance();
return { proxy}
},
data() {
return {
student: {
id:'007',
name:'meix',
age:'18'
}
}
},
created() {
console.log("-------- create ----------");
this.proxy.$student.student(this.student);
console.log(this.proxy.$student.get());
},
}
</script>
<style>
</style>
关于getCurrentInstance，这里不讲解。
