### 為什么? 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> ~~~