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的使用

Answer 2

<template>
<div>

<button @click="callMethod">调用方法</button>

</div>
</template>

<script>
export default {
methods: {

oldMethod() {
  console.log("老的方法");
},
callMethod() {
  this.oldMethod(); // 调用老的方法
  this.newMethod(); // 调用新的方法
}

}
};

// 在其他地方，例如另一个组件或模块，可以进行新方法的挂载
import { ref } from 'vue';

export function mountNewMethod(componentInstance) {
componentInstance.newMethod = () => {

console.log("新的方法");

};
}
</script>