Vue Js:在本地使用导入插件 mixin
Posted
技术标签:
【中文标题】Vue Js:在本地使用导入插件 mixin【英文标题】:Vuejs : use imported plugin mixin localy 【发布时间】:2021-02-18 00:34:29 【问题描述】:是否可以在一个组件中使用从 VueJS 插件导入的 mixin?
我创建了一个插件,当我导入它时,我可以从我的所有组件中访问 mixin 的功能。
有没有办法让它只在一个组件中可用?还是所有插件都根据定义向 Vue 添加全局级功能?
【问题讨论】:
简单地说:当然可以。只需在特定组件中注册该 mixin 即可。 没用,即使我在一个组件中注册它,它也可供所有其他组件使用。 【参考方案1】:恕我直言,您应该使用创建 2 件事:
全局导入必需品的插件 你想要的组件中需要导入的mixin示例:
//main.js
import MyPlugin from 'my-library'
vue.use(MyPlugin)
在组件中
//component.vue
import MyMixin from 'my-library'
export default
mixins: [myMixin],
【讨论】:
【参考方案2】:您可以在全局或本地注册 mixin。如果你没有全局注册一个 mixin,它只会在本地注册的组件中可用。 因此,通过本地注册,您可以使 mixin 仅在特定组件中可用。
全局注册:只需要在main.js
文件中声明即可
注意:您不需要在组件中注册 mixin
// main.js
import myMixin from './mixins/myMixin'
Vue.mixin(myMixin) // makes the plugin globally available
new Vue(
// ...
).$mount('#app')
Vue 3:
// main.js
import myMixin from './mixins/myMixin'
const app = createApp(App)
app.mixin(myMixin) // makes the plugin globally available
app.mount('#app')
本地注册:你不在main.js
文件中声明,而是在相关组件中注册mixin
// componentWithMixin.vue
import myMixins from "../mixins/myMixin"
export default
// ...
mixins: [myMixins] // importing the mixin - without this line, the mixin can't be available
【讨论】:
以上是关于Vue Js:在本地使用导入插件 mixin的主要内容,如果未能解决你的问题,请参考以下文章
Vue基础系列(十九)-析脚手架-控制vue的4格缩进-vue.config.js配置文件-ref属性-props配置项-mixin(混入)-插件