javascript vuejs2组件代码重构以避免重复元素

kjthegm6 于 2022-11-27 发布在 Java

关注(0)|答案(1)|浏览(160)

下面的代码是在两个组件中使用，这是different.so请不要说使用道具..只使用数据变量&大多数方法是相同的（相同），但组件模板是不同的。

<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复合APi设置（）挂钩这是最好的方法..
但我使用的是vuejs 2.my，问题是如何在vuejs2中执行此操作，以便我可以避免重复声明数据变量和方法
一种方法是使用服务类（JavaScript Class）。

**服务名称：**utils.js

例如this.utils.address.billing.address1、this.utils.xyz();，但我只想像在正常this.address.billing.address1; this.xyz();中那样访问

JavaScript

来源：https://stackoverflow.com/questions/74583780/vuejs2-components-code-refactoring-to-avoid-repeating-element

1条答案

按热度按时间

eqqqjvef1#

您应该像这样使用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中定义的所有数据、计算和函数！

赞(0）回复(0）举报 2022-11-27

我来回答

javascript vuejs2组件代码重构以避免重复元素

1条答案

相关问题

热门标签

最新问答