阅读数:247 评论数:0

一、在main.js挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import 'default-passive-events'
import Axios from 'axios';
const golBalTest = () =>{
    console.log('测试全局挂载');
  return '测试全局挂载';
}
const app = createApp(App) 
// 挂载到vue原型上(方法1)
app.config.globalProperties.$axios = Axios;
app.config.globalProperties.$golBalTest = golBalTest;
app.config.globalProperties.$Test = "我在全局";
// 方法2
app.provide('root','root测试')
app.use(Antd);
app.use(store).use(router).mount('#app')

二、子组件中使用

<template>
  <div>
    <!-- {{ $Test }}
    {{ $golBalTest() }} -->
    <p>root:{{ root }}</p>
    <ul v-for="(item, index) in dataList" :key="index">
      <li>{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import { reactive, ref, onMounted, inject, getCurrentInstance } from "vue";
import Axios from "axios";
export default {
  name: "axios",
  setup(props, context) {
    let { attrs, slots, emit } = context;
    // console.log("props", props);
    // console.log("attrs", attrs);
    const { proxy } = getCurrentInstance();
    console.log("proxy", proxy.$axios);
    let dataList = ref([]);
    let root = inject("root");
    onMounted(() => {
      proxy.$axios
        .get(
          "http://vueshop.glbuys.com/api/home/category/menu?token=1ec949a15fb709370f"
        )
        .then((res) => {
          console.log("res", res);
          if (res.data.code == 200) {
            dataList.value = res.data.data;
          }
        });
    });
    return {
      dataList,
      root,
    };
  },
};
</script>
<style scoped lang='scss'>
</style>