inject vue

// main.js

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// Injecting a property globally
app.config.globalProperties.$myInjectedProperty = 'Hello from injected property';

// Injecting a method globally
app.config.globalProperties.$myInjectedMethod = () => {
  console.log('This is an injected method');
};

app.mount('#app');

// In any component
// You can use the injected properties or methods like this:

// <script>
// export default {
//   mounted() {
//     console.log(this.$myInjectedProperty); // Output: Hello from injected property
//     this.$myInjectedMethod(); // Output: This is an injected method
//   }
// }
// </script>

解释说明

1. 全局属性注入:

   • 使用 app.config.globalProperties 可以向所有组件中注入自定义的属性或方法。
   • 在上面的代码中，我们注入了一个字符串属性 $myInjectedProperty 和一个方法 $myInjectedMethod。

2. 在组件中使用:

   • 注入的属性和方法可以在任何 Vue 组件中通过 this.$myInjectedProperty 或 this.$myInjectedMethod 访问。

3. 注意事项:

   • 全局注入的方式在 Vue 3 中是通过 app.config.globalProperties 实现的，而在 Vue 2 中则是通过 Vue.prototype 实现的。
   • 这种方式适合一些全局配置、工具函数等场景，但要避免滥用，以免增加不必要的复杂性。