1、插件的基本介绍

• 1、功能：用于增强Vue

• 2、本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

• 3、定义插件：

  对象.install = function (Vue, options) {
      // 1. 添加全局过滤器
      Vue.filter(....)
  
      // 2. 添加全局指令
      Vue.directive(....)
  
      // 3. 配置全局混入(合)
      Vue.mixin(....)
  
      // 4. 添加实例方法
      Vue.prototype.$myMethod = function () {...}
      Vue.prototype.$myProperty = xxxx
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

• 4、在main.js中
  使用插件：Vue.use()

---

2、实际应用

2.1 目录结构

2.2 代码实例

2.2.1 学校组件（School.vue）

<template>
  <div class="demo">
    <h2>学校名称：{{ name | mySlice}}h2>
    <h2>学校地址：{{ address }}h2>
    <input type="text" v-fbind:value="name">
    <button @click="showName">点我提示学校名button>
  div>
template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "长沙大学真不赖",
      address: "湖南长沙",
    };
  },
  methods: {
    showName() {
      alert(this.name);
    },
  },
};
script>

<style>
.demo {
  background-color: pink;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

---

2.2.2 学生组件（Student.vue）

<template>
  <div>
    <h2>学生姓名：{{ name }}h2>
    <h2>学生性别：{{ sex }}h2>
    <h2>学生年龄：{{ studentAge }}h2>
    <button @click="modifiAge">修改学生年龄button>
  div>
template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "zyz",
      sex: "男",
      studentAge: 18,
    };
  },
  methods: {
    modifiAge() {
      this.studentAge++;
    },
  },
};
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---

2.2.3 定义的插件

const plugin = {
    install(Vue) {

        //定义全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 5)
        })

        //定义全局指令
        Vue.directive('fbind', {
            //指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value
            }
        })

        //定义混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            },
        })


    }
}

export default plugin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

---

2.2.4 App.vue （汇总定义的组件）

<template>
  <div>
    <Student/>
    <hr />
    <School/>
    
  div>
template>

<script>
//引入组件
import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
  name: "App",

  components: {
    School,
    Student,
  },
};
script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

---

2.2.5 main.js中引入组件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import plugin from './plugins'

Vue.use(plugin)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

3、测试效果

4、什么是mixin(混入)

• 1、功能：可以把多个组件共用的配置提取成一个混入对象(便于维护、共用部分抽取出来、同时提高代码复用)

• 2、使用方式：

  第一步定义混合：

  {
      data(){....},
      methods:{....}
      ....
  }
  1
  2
  3
  4
  5

  第二步使用混入：

  ​ 全局混入：Vue.mixin(xxx)
  ​ 局部混入：mixins:['xxx']

---