关于vue.js:vue3全局挂载和使用

41次阅读

共计 788 个字符，预计需要花费 2 分钟才能阅读完成。

1. 开发环境 vue3.0
2. 电脑系统 windows10 专业版
3. 在应用 vue 开发的过程中, 咱们会有一些专用的属性和办法, 咱们个别为了方便使用会这个属性和办法挂载到全局, 上面我来分享一下
4.vue2 挂载办法

Vue.prototype.$http = http

// 在对应的组件中应用
this.$http

// 这种写法置信小火们很相熟了, 那么在 vue3 中怎么写呢?

4-1.vue3 挂载并应用

// 全局挂载
const app = createApp(App)
app.config.globalProperties.$Methods = Methods;

// 在对应的组件中应用
import {
  defineComponent,
  ref,
  getCurrentInstance,
  onMounted,
  reactive,
} from "vue";

// 因为 vue3 是组合 API, 所以要引入对应的 (getCurrentInstance)

// setup
// 一个 json 数组去重
const {proxy}: any = getCurrentInstance();// 要害代码
    const $Methods = proxy.$Methods;// 要害代码
    const jsonarrreduce = reactive([{ id: "1", name: "李白"},
      {id: "2", name: "杜甫"},
      {id: "3", name: "白居易"},
      {id: "4", name: "项羽"},
      {id: "5", name: "小米"},
      {id: "1", name: "红米"},
      {id: "1", name: "诺基亚"},
      {id: "2", name: "真我"},
    ]);
    onMounted(() => {console.log($Methods.JsonArrReduce(jsonarrreduce, "id"));
    });

5. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。

正文完