通常我使用带有功能的js代码在某些事件上运行。
现在，我正在使用nuxt.js，我想知道将文件放在哪里或如何创建在每个组件中使用这些功能的全局方法。我可以在每个特定组件内编写所需的方法，但在该组件外将无法使用。
如何在vue / nuxt中做到这一点？
因此，在vue.js中做到这一点的一种方法是使用mixins，在nuxt中，您也可以使用mixins，然后应将它们注册为插件，但首先：
非全局混合
为您的mixins创建一个额外的文件夹。例如在/mixins/myMixin.js中
export default {
methods: {
commonMethod() {
console.log('Hello')
}
}
}
然后导入布局，页面或组件，并通过mixins对象添加它：
<script>
import myMixin from '~/mixins/myMixin.js'
export default {
mixins: [myMixin]
}
</script>
全局混合
例如在一个新文件plugins / mixinCommon.js中：
import Vue from 'vue'
Vue.mixin({
methods: {
commonMethod() {}
}
})
nuxt.config.js像这样包含文件：plugins: ['~/plugins/mixinCommon']
之后，您将拥有到处可用的方法，并使用this.commonMethod（）在此处调用该方法。但是这里有来自vue.js文档的建议：
谨慎使用全局mixins，因为它会影响创建的每个Vue实例，包括第三方组件。在大多数情况下，仅应将其用于自定义选项处理，如上例所示。最好将它们作为插件发布以避免重复应用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句