javascript - vue3 实例 如何挂载一个新的 method 覆盖老的 method?

Question

vue3

const app = createApp({    setup() {        const fn = ()=>{}        return {fn}    }  }).mount('#app')app.fn = ()=>{} // 这里我要挂载一个新函数 来覆盖 fn,如何实现?

Answer 1

用 provide 和 inject

// 父组件import { provide } from 'vue';const app = createApp({  setup() {    const newFun = () => {      console.log('这是一个新的方法');    };    provide('newFun', newFun);  },}).mount('#app');// 子组件import { inject } from 'vue';export default {  setup() {    const newFun = inject('newFun');    newFun(); // 调用新的方法  },};

用app.config.globalProperties：

import { createApp } from 'vue';const app = createApp({  setup() {    //  this.newFun 调这个方法  },});app.config.globalProperties.newFun = () => {  console.log('这是一个新的方法');};app.mount('#app');

组件里：

import { defineComponent } from 'vue';export default defineComponent({  setup(props, { root }) {    // 用 root.newFun 调方法    root.newFun();  },});

可以看看这篇文章：vue3.0之全局变量app.config.globalProperties的使用