vue3方法全局使用

《vue3方法全局使用》

解决方案

在Vue3项目中，若要实现方法的全局使用，可以通过创建插件、混入（mixin）或者将方法挂载到全局属性上等方式。这些方法都能让组件方便地调用公共的方法，提高代码的复用性。

创建插件

这是比较推荐的一种方式。创建一个插件文件myPlugin.js：
```javascript
// myPlugin.js
import { h } from 'vue'

export default {
install(app) {
// 定义全局方法
app.config.globalProperties.$myMethod = function (params) {
console.log('这是一个全局方法', params)
return '返回结果'
}

// 添加全局指令等其他操作也可放在这里
app.directive('focus',{
  mounted(el){
    el.focus()
  }
})

}
}

然后在`main.js`中引入并使用这个插件：javascript
import { createApp } from 'vue'
import App from './App.vue'
import myPlugin from './plugins/myPlugin'

const app = createApp(App)

app.use(myPlugin)

app.mount('#app')
在组件中就可以这样使用了：javascript

export default {
name: 'MyComponent',
mounted(){
this.$myMethod('参数') // 调用全局方法
}
}

</p>

<h2><h2>使用混入</h2></h2>

<p>不过需要注意的是，混入的使用可能会带来一些可维护性方面的问题，比如容易引起命名冲突等。
```javascript
// globalMixin.js
export const globalMixin = {
  methods: {
    globalMixinMethod(params){
      console.log('来自混入的全局方法', params)
    }
  }
}</p>

<p>// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { globalMixin } from './mixins/globalMixin'</p>

<p>const app = createApp(App)</p>

<p>app.mixin(globalMixin)</p>

<p>app.mount('#app')
``<code>
在组件中就可以直接使用globalMixinMethod`方法了。

通过提供 - 注入

这种方式适用于父子组件之间的依赖注入场景，也可以实现类似全局方法的效果。
```javascript
// 父组件

  



import { provide } from 'vue'
export default {
  setup() {
    const globalMethod = (params) => {
      console.log('提供 - 注入的全局方法', params)
    }
    provide('globalMethod', globalMethod)
  }
}


// 子组件

  

    
  



import { inject } from 'vue'
export default {
  setup() {
    const globalMethod = inject('globalMethod')
    globalMethod('子组件传参')
  }
}

以上就是在Vue3中实现方法全局使用的几种思路，可以根据项目的实际情况选择合适的方式。