Vue学习---插件和混入

1. 插件

1.1 了解插件

Vue.js允许我们自定义插件，对Vue的功能进行增强或补充。(可以理解为Vue的“外挂”，但是该“外挂”合理合法)
本质：包含install方法的一个对象，install 的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

1.2 创建插件

如何定义一个插件：
总之你可以在插件中定义任何你想增强的功能，插件的功能范围没有严格的限制——一般有下面几种：

1. 添加全局方法或者 property。
2. 添加全局资源：指令/过滤器/过渡等。
3. 通过全局混入来添加一些组件选项。
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。

插件名.install = function (Vue,options){
  //1. 全局添加过滤器 
  Vue.filter(...)
  //2. 添加全局指令
  Vue.directive(...)
  //3. 配置全局混入（合）
  Vue.mixin(...)
  //4. 添加实例方法
  Vue.prototype.$myMethod=function(){}
  //5. 添加全局方法或 property
    Vue.myGlobalMethod = function () {
      // 逻辑...
    }
}

使用插件：

Vue.use(插件名，{可选参数})

下面通过一个案例告诉大家如何定义和使用插件：

1. Vue.js的插件应该暴露一个install方法。这一个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象。
   
   plugins.js ：

export default {
  //必需定义一个install方法
  install(Vue, options) {
    //定义一个全局过滤器
    Vue.filter('fmtData', function (val) {
      // 截取数据的前四位
      return val.slice(0, 4)
    })
    // 定义全局指令
    Vue.directive('focus', {
      inserted(el) {
        el.focus()
      },
      bind(el, binding, vnode) {
        el.style.backgroundColor = binding.value
      }
    })
    //定义一个混入对象
    Vue.mixin({
      data() {
        return {
          x: 100,
          y: 100
        }
      }
    })
    //定义一个实例方法
    Vue.prototype.message=()=>{
      alert('我使用了插件中的方法')
    }
  }
}

在main.js中引入并使用：

// 引入插件
import plugins from './plugins'
//使用插件
Vue.use(plugins)

在某个vue文件中可以直接使用：

<template>
  <div>
    
    
    <h2>学校名称:{{name | fmtData}}h2>
    <h2>地址：{{address}}h2>
    
    <button @click="test">使用插件中的方法button>
  div>
template>

<script>
  export default{
    data(){
      return{
        name:'厦门大111学111',
        address:'福建'
      }
    },
    methods:{
      test(){
        this.message()
      }
    }
  }
script>

2. 混入

一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

功能：可以把多个组件公用的配置提取成一个混入对象

使用方式：
第一步：定义一个混入对象

var 混入对象名 = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

第二步：使用混入

1. 全局混入：Vue.mixin(混入对象名)
2. 局部混入：mixins:[‘混入对象名’]