Vue 之 mixins 1.0 简单使用

先来一段官方的解释:

mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。

反正对于初学者的我来说,看起来还好,但没有太多的帮助.

---

我所理解的 mixins

mixins 翻译过来就是混合的意思.

一个非常常见的场景.

很多组件都有隐藏和显示的功能.
可能是一个按钮,可能是鼠标移入移出.

// 第一个是鼠标移入移除
Vue.component('tooltip',{
    template:`
      <div>
        <span @mouseenter='show' @mouseleave='hidden'>预览内容</span>
        <p v-show='visiable'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis expedita sequi nobis, quia atque nesciunt fuga ab, fugiat cupiditate, quibusdam impedit vitae. Voluptas quam placeat, quas ipsum mollitia voluptatem. Ipsum?
          </p>
      </div>
    `,

    data() {
      return {
        visiable:false
      }
    },
    methods:{
      show() {
        this.visiable = true
      },
      hidden() {
        this.visiable = false
      }
    }
  })

// 第二个是点击
  Vue.component('popup',{
    template:`<div>
        <button @click='toggle'>Popup</button>
        <div v-if='visiable'>
            <h4>title</h4>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium
          </div>
      </div>`,

      data() {
      return {
        visiable:false
      }
    },
    methods:{
      toggle() {
        this.visiable = !this.visiable
      },
    }
  })

效果如图:

mixins.gif

首选看分析一下:

• 两个组件的功能很类似
• 都是隐藏和显示
• 一个是鼠标点击按钮
• 一个是鼠标的 mouseenter & mouseleave
• 他们内部都是使用 visiable 属性,来控制元素的隐藏和显示.

因为功能类似且有部分重合,其实我们可以把这一些代码定义在另外一个地方,形成一个所谓的 mixins

let mixinScope = {
    data() {
      return {
        visiable:false
      }
    },
    methods:{
      toggle() {
        this.visiable = !this.visiable
      },
      show() {
        this.visiable = true
      },
      hidden() {
        this.visiable = false
      }
      
    }
  }

然后在两个组价内部使用 mixins:[] 来引用这个公用的 mixins.

Vue.component('tooltip',{
    template:`
      <div>
        <span @mouseenter='show' @mouseleave='hidden'>预览内容</span>
        <p v-show='visiable'>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis expedita sequi nobis, quia atque nesciunt fuga ab, fugiat cupiditate, quibusdam impedit vitae. Voluptas quam placeat, quas ipsum mollitia voluptatem. Ipsum?
          </p>
      </div>
    `,
    // 引用一段公用的代码段
    mixins:[mixinScope]
}


Vue.component('popup',{
    template:`<div>
        <button @click='toggle'>Popup</button>
        <div v-if='visiable'>
            <h4>title</h4>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium
          </div>
      </div>`,
      mixins:[mixinScope]
    }

运行结果

mixins.gif

---

总结:

• mixins 混合,可以封装一些组件的公用代码片段.
• 利用mixins:[] ,将这些公用的代码片段功能无缝的接入到当前的组件中.
• mixins:[] 是数组,说明后面可以接多个 mixinsScope
• 组件接入了 mixins 也不影响自己内部重新定义data,methods之类的属性.
  • 实际上,如果重名了,后者会覆盖前者.
  • 没有重名,就把两者结合在一起.