Vuejs：在本地使用导入的插件 mixin

Question

是否可以在一个组件中使用从 VueJS 插件导入的 mixin？

我创建了一个插件，当我导入它时，我可以从我的所有组件访问 mixin 的功能。

有没有办法让它只在一个组件中可用？或者所有插件都根据定义向 Vue 添加了全局级别的功能？

Answer 1

恕我直言，您应该使用创建 2 个东西：

全局导入要领的插件
你想要的组件中需要导入的mixin

示例：

//main.js
import {MyPlugin} from 'my-library'

vue.use(MyPlugin)

在组件中

//component.vue
import {MyMixin} from 'my-library'

export default {
   mixins: [myMixin],
}

Answer 2

您可以在全局或本地注册一个 mixin。如果您不在全局范围内注册 mixin，它将仅在本地注册的组件中可用。 因此，通过本地注册，您可以使 mixin 仅在特定组件中可用。

全局注册：只需要在main.js文件中声明即可
注意：你不需要在组件中注册mixin

视点 2：

// 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
}

Vuejs：在本地使用导入的插件 mixin

Vuejs : use imported plugin mixin localy

javascript

vue.js

vue-component

vuejs2

vue-mixin