一、版本

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

这是一个学生信息类
写一个集体挂载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,这里不讲解。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐