使数据和方法在 Vue js 中可重用

Question

假设我在 vue 中有这样的脚本

<script>
export default {
  name: "BaseCardAnnotationOption",
  data() {
    return {
      includeAnnotations1: false,
      embedIntoImage: null,
      burnIntoImage: null,
      burnReduction1: false,
      maintainColor1: false,
      annotationOption1: null
    };
  },
  methods: {
    deselectDisabled() {
      return this.includeAnnotations1 === false
        ? ((this.annotationOption1 = null), (this.maintainColor1 = false))
        : ((this.annotationOption1 = 0), (this.maintainColor1 = false));
    }
  }
};
</script>

而且我在其他 4 或 5 个地方使用数据变量和方法。有没有一种方法可以将所有这些放在一个新文件中，并在需要时从组件中调用它们。谢谢

Answer 1

您可以使用 mixin 来定义一些选项并在您的组件中重复使用它们，创建一个名为 someMixins.js 的文件，其中包含以下内容：


export default const someMixins={
data() {
    return {
      includeAnnotations1: false,
      embedIntoImage: null,
      burnIntoImage: null,
      burnReduction1: false,
      maintainColor1: false,
      annotationOption1: null
    };
  },
  methods: {
    deselectDisabled() {
      return this.includeAnnotations1 === false
        ? ((this.annotationOption1 = null), (this.maintainColor1 = false))
        : ((this.annotationOption1 = 0), (this.maintainColor1 = false));
    }
  }

}

然后在组件内部导入，使用如下：

<script>
import someMixins from 'path/to/someMixins.js'
export default {
  name: "BaseCardAnnotationOption",
  mixins:[someMixins]
}

Answer 2

只是对 Boussadjra Brahim 回复的补充，如果您使用的是 Vue 3，则可以在整个代码的“脚本设置”中导入您的函数。

在类似“../module.js”或您喜欢的其他文件中：

export function deselectDisabled() {

// Here you will need to modify and adapt your function to use callbacks. 

}

然后你就可以导入它并像这样使用它了：

<script setup>
import { deselectDisabled } from './module.js
// Now you can use your function all over your vue file.

...

</script>

这是 vue 3 正在实施的新“语法糖”，它对大型项目非常有帮助。你可以在这里看到更多相关信息： https://v3.vuejs.org/api/sfc-script-setup.html

使数据和方法在 Vue js 中可重用

Make data and methods reusable in Vue js

vue.js

vuetify.js