src_插件

# 代码

# `代码路径`

$ tree -N
.
├── App.vue
├── components
│   ├── School.vue
│   └── Student.vue
├── main.js
└── plugins.js

1
2
3
4
5
6
7
8

# `App.vue`

<template>
  <div>
    <School/>
    <hr>
    <Student/>
  </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

# `School.vue`

<template>
  <div>
    <h2> 学校名称：{{name | mySlice}} </h2>
    <h2> 学校地址：{{address}} </h2>
  </div>
</template>

<script>
    export default {
        name:'School',
        data() {
            return {
              name:'shangguigua',
              address:'beijing'
            }
        },
        methods: {
          test(){
            this.hello()
          }
        },
    }
</script>

<style>

</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

# `Student.vue`

<template>
  <div>
    <h2> 学生姓名：{{name}} </h2>
    <h2> 学生性别：{{sex}} </h2>
    <input type="text" v-fbind:value="name">
  </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
              name:'eryajf',
              sex:'男'
            }
        },
    }
</script>

<style>

</style>

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

# `main.js`

import Vue from "vue"
import App from './App.vue'
import plugins from './plugins'
Vue.config.productionTip = false

Vue.use(plugins,1,2,3)

new Vue({
    el: '#app',
    components:{App},
    render: h => h(App)
});

1
2
3
4
5
6
7
8
9
10
11
12

# `plugins.js`

export default {
    install(Vue,x,y,z){
        console.log(x,y,z)
        //全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })

        //定义全局指令
        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
                }
            },
        })

        //给Vue原型上添加一个方法（vm和vc就都能用了）
        Vue.prototype.hello = ()=>{alert('你好啊')}
    }
}

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

# 笔记

功能：用于增强 Vue
本质：包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：

对象.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

使用插件：Vue.use()

上次更新: 2024/02/28, 13:00:35

← src_mixin(混入) src_scoped样式→

src_插件

# 代码

# 代码路径

# App.vue

# School.vue

# Student.vue

# main.js

# plugins.js