在Vue.js中使用Mixins的方法

(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )

一个很常见的场景: 有两个非常相似的组件, 它们拥有非常相似的基本功能, 但是它们之间又有足够的不同的地方, 该如何选择呢"_blank" href="https://cn.vuejs.org/v2/guide/mixins.html" rel="external nofollow" >混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

栗子

假设我们有一些不同的组件, 它们的工作是切换状态boolean, 一个模态(modal)和一个提示(tooltip). 这些tooltips和modals没有很多共同之处, 除了这个功能: 它们看起来不一样, 它们使用起来也不尽相同, 但是它们的逻辑是相似的 .

//modal
const Modal = {
 template: '#modal',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}
 
//tooltip
const Tooltip = {
 template: '#tooltip',
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}

我们可以从中提取逻辑, 并创建可以复用的部分：

const toggle = {
 data() {
  return {
   isShowing: false
  }
 },
 methods: {
  toggleShow() {
   this.isShowing = !this.isShowing;
  }
 }
}
 
const Modal = {
 template: '#modal',
 mixins: [toggle]
};
 
const Tooltip = {
 template: '#tooltip',
 mixins: [toggle]
};

duang — 一个小而简单的:chestnut:让我们知道了Mixins对于封装一些可复用的功能如此有趣、方便、实用。

demo地址：https://github.com/hzzly/xyy-vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：JavaScript面向对象精要(下部)
下一篇：JavaScript面向对象精要(上部)