### 为什么? Mixins 封装可重用的代码，避免了重复。如果两个组件共享有相同的功能，则可以使用 mixin。通过 mixin，你可以专注于单个组件的任务和抽象的通用代码。这有助于更好地维护你的应用程序。 ### [](https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#怎么做-13)怎么做? 假设你有一个移动端和桌面端的菜单组件，它们共享一些功能。我们可以抽象出这两个组件的核心功能到一个 mixin 中，例如： ~~~ const MenuMixin = { data () { return { language: 'EN' } }, methods: { changeLanguage () { if (this.language === 'DE') this.$set(this, 'language', 'EN') if (this.language === 'EN') this.$set(this, 'language', 'DE') } } } export default MenuMixin ~~~ 要使用 mixin，只需将其导入到两个组件中（我只展示移动组件）。 ~~~ <template> <ul class="mobile"> <li @click="changeLanguage">Change language</li> </ul> </template> <script> import MenuMixin from './MenuMixin' export default { mixins: [MenuMixin] } </script> ~~~