Vue3、Vue2原型链挂载区别与实战举例

Vue2中挂在原型链方法

Vue.property.$http = api

使用方法

this.http

实战举例

<template>
  <div class="homeStyle">
    <div class="search">
      <div class="searchLeft">
        <el-input
          class="searchInput"
          v-model="input"
          placeholder="请输入查询的内容"
          @change="sendInputData"
        />
      </div>
      <div class="searchBtnRight">
        <el-button type="primary">查询</el-button>
        <el-button type="success">
          <router-link to="/addGoods" class="linkStyle">添加</router-link>
        </el-button>
      </div>
    </div>
    <div class="table-bd">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="selection" width="40" />
        <el-table-column prop="id" label="商品ID" width="140" />
        <el-table-column prop="price" label="商品价格" width="140" />
        <el-table-column prop="title" label="商品类目" width="140" />
        <el-table-column prop="image" label="规格图片" />
        <el-table-column prop="sellPoint" label="商品卖点" />
        <el-table-column prop="descs" label="商品描述" />
        <el-table-column prop="name" label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >Edit</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page_pg">
      <MyPagination @changePage="changePage"></MyPagination>
    </div>
  </div>
</template>
<script>
import MyPagination from "../../components/Pagin/MyPagination.vue";
import { reactive } from "vue";
export default {
  setup(){
    return reactive({
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-02",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-04",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-01",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
    });
  },
  created() {
    this.initData();
  },
  methods: {
    handleEdit(number, User) {
      console.log(index, row);
    },

    handleDelete(number, User) {
      console.log(index, row);
    },
    changePage(page) {
      //此时拿到数据渲染页面,重新请求数据
      console.log("当前页面是");
      console.log(page);
    },
    initData() {
      // axios.get('/api/api/projectList',{page :  1})
      // .then(res => {
      //   console.log(res)
      // })
      // .catch(err => {
      //   console.error(err);
      // });
      this.$http
        .getGoodList({
          page: 1,
        })
        .then((res) => {
          console.log(res.data.data);
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  components: {
    MyPagination,
  },
};
</script>
<style scoped>
.page_pg {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-bd {
  margin: 0 20px;
}
.search {
  display: flex;
  height: 40px;
  overflow: hidden;
  margin: 20px 20px;
}
.el-input {
  height: 40px;
}

.search .searchLeft {
  flex: 1;
  margin-right: 20px;
}
.search .searchBtnRight {
  display: flex;
  align-items: center;
  width: 300px;
}
.router-link-active,
.router-link-exact-active,
a:-webkit-any-link {
  text-decoration: none;
  color: white;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import api from './api/base_url'
Vue.config.productionTip = false
Vue.prototype.$http = api
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Vue3中挂在原型链方法

app.config.globalProperties.$http = api;

import { getCurrentInstance} from "vue";

  setup(props, content) {
    const { proxy } = getCurrentInstance();
    function getData() {
      proxy.$http
        .getGoodList({
          page: 1,
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    }
    return {getData};
  },

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import '@/assets/font/iconfont.css';
import api from './api/index.js';
const app = createApp(App);
app.config.globalProperties.$http = api;
app.use(store).use(router).use(ElementPlus).mount('#app')