首页 » 文章 » 文档 » vuejs 使用问题 » Vue 组件抽离公共逻辑(高级)

Vue 组件抽离公共逻辑(高级)

mixin

  • 多个组件有相同的逻辑,抽离出来
  • mixin 并不是完美的解决方案,会有一些问题
  • Vue 3 的 Composition API 旨在解决这些问题

首先有这样一段代码

<template>
    <div>
        <p>{{name}} {{major}} {{city}}</p>
        <button @click="showName">显示姓名</button>
    </div>
</template>

<script>
import myMixin from './mixin'

export default {
    mixins: [myMixin], // 可以添加多个,会自动合并起来
    data() {
        return {
            name: '张三',
            major: 'web 前端'
        }
    },
    methods: {
    },
    mounted() {
        // eslint-disable-next-line
        console.log('component mounted', this.name)
    }
}
</script>

而 mixin 是一个 mixin.js 文件

export default {
    data() {
        return {
            city: '深圳'
        }
    },
    methods: {
        showName() {
            // eslint-disable-next-line
            console.log(this.name)
        }
    },
    mounted() {
        // eslint-disable-next-line
        console.log('mixin mounted', this.name)
    }
}

这就是 mixin 的用法,抽象出公共逻辑。但 mixin 也有问题:

  • 变量来源不明确,不利于阅读
  • 多个 mixin 可能会造成命名冲突
  • mixin 和组件可能出现多对多的关系,复杂度较高

»vuejs 使用问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top