Vue Mixin - 处理数据属性

问题描述

我正在尝试将 mixin 用于我的几个 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 中使用，反之亦然（以及计算属性和方法）。所以我担心如果我更改数据属性名称（假设 {{1} } 到 mainComponentValue) 在 name 或任何其他使用 mixin 的 vue 组件，然后它会弄乱我的 mixin。反之亦然，当我从 mixin 中更改计算属性时，main.vue 将被搞砸。

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

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

谢谢！

解决方法

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

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

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

vue-mixin vue.js