vuejs2组件代码重构避免重复元素答案

【问题标题】：vuejs2 components code refactoring to avoid repeating elementvuejs2组件代码重构避免重复元素
【发布时间】：2022-11-27 02:18:49
【问题描述】：

下面的代码用于两个不同的组件。所以请不要说使用道具.. 仅使用数据变量，大部分方法相同（相同），但组件模板不同。

<template>
   
</template>

<script>
export default {
    name: "abc",
    data() {
        return {
            address: {
                billing: {
                    address1: [],
                    first_name: "",
                    last_name: "",
                    email: "",
                    phone: "",
                    city: "",
                    postcode: ""
                },
            },
        };
    },
    created() {
    },
    mounted() {
    },
    updated() {
    },
    methods: {
        xyz() {},
    },
};
</script>

哪种方法最好？.. 在vueJs3 Composite APi setup() 挂钩最好的方法..

但我正在使用 vuejs 2.我的问题是如何在 vuejs2 中做到这一点我可以避免重复声明数据变量和方法

一种方法是使用 service class(JavaScript Class) 。

服务名称：工具.js

例如this.utils.address.billing.address1、this.utils.xyz(); 但我只想正常访问this.address.billing.address1; this.xyz();

【问题讨论】：

使用mixin

标签： javascript vue.js vuejs2

【解决方案1】：

您应该像这样使用 MIXIN：

创建文件/src/mixins/SomeMixin.js

export default {
data() {
        return {
            address: {
                billing: {
                    address1: [],
                    first_name: "",
                    last_name: "",
                    email: "",
                    phone: "",
                    city: "",
                    postcode: ""
                },
            },
        };
    },
    created() {
    },
    mounted() {
    },
    updated() {
    },
    methods: {
        xyz() {},
    },
}

在组件中执行：

<script>
import AddresMixin from "./src/mixins/SomeMixin.js";
export default {
  name: "abc"
  mixins: [SomeMixin],
}
</script>

组件现在可以访问 mixin 中定义的所有数据、计算和函数！

【讨论】：