0

我正在尝试将 mixins 用于我的几个 Vue SFC 中使用的一些可重用方法。现在，我担心的是 mixins 是如何处理数据属性的？我发现使用 mixin 时很容易出错（例如，在主组件中重命名数据属性并在 mixin 中访问它时）。处理这种情况的最佳方法是什么？

// main.vue
<template>
   <div>
       Input Name:
      <input v-model="mainComponentValue" placeholder="edit me">
       <br/><br/>
       {{ welcomeMessage }} <br/>
       Member ID: {{ getMemberIdNum() }}     
       <br/><br/>
       {{ checkMemberOftheMonth() }}
       <br/><br/><br/>
      {{ someMainComponentMethod() }}
   </div>
</template>

<script>
import mixin from ‘./mixin.js’
export default {
   mixins: [mixin],
   data () {
      return {
         title: 'Component',
         mainComponentValue: 'John'
      }
   },
   methods: {
      someMainComponentMethod () {
         return 'This is a computed property from the mixin: ' + this.memberName
      }
   }
}
</script>

然后在我的mixin上：

// mixin.js

export default {
   data () {
      return {
         mixinSampleValue: 'Hello there'
      }
   },
   computed: {
     welcomeMessage () {
         return this.mixinSampleValue + ', ' + this.mainComponentValue.toUpperCase() + '!'
     },
     memberName () {
         return this.mainComponentValue.toLowerCase()
     }
   },
   methods: {
     getMemberIdNum () {
       switch (this.memberName) {
         case 'john':
           return '0001'
         case 'roger':
           return '0002'
         default:
           return '0003'
       }
     },
      checkMemberOftheMonth () {
         // use main component's data
         if (this.memberName === 'john') {
             return 'Congratulations, you are our member of the month!'
         }
      }
   }
}

如您所见，main.vue数据属性用于 mixin 中，反之亦然（以及计算属性和方法）。所以我担心如果我在或任何其他使用 mixin 的 vue 组件中更改数据属性名称（比如说mainComponentValueto name）main.vue，那么它会弄乱我的混音。反之亦然，当我从 mixin 更改计算属性时，main.vue 将被搞砸。

有什么办法可以为这样的情况添加某些检查？

作为参考，这里是一个示例 CodePen： https ://codepen.io/keechan/pen/eYBRQGM

谢谢！

4

1 回答 1

1

我们不再（几乎）使用 mixins。在我们的开发团队中，我们遇到了同样的问题，即在组件内部，mixin 提供了什么并不明显。

相反，我们使用带有作用域插槽的完整或无渲染组件，或者我们只是从 lib 目录中导入一些函数，我们希望在多个 vue 组件之间共享这些函数。

另一种选择是Composition API，另请参见：https ://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/

于 2021-02-19T07:27:44.110 回答