Vue全解: 构造选项(进阶)

160 阅读2分钟

资源

  • directives 指令
    • 用于自定义指令
    1. 定义一个全局的指令: xVue 会自动在前面加上 v-, 它可以在任何地方使用,它的作用是点击打印一个字符串
        import Vue from 'vue'
        Vue.directive('x', {
            inserted(el) {
                el.addEventListener('click', function(){
                    console.log('全局的 v-x 指令')
                })
            }
        })
    
    • inserted 表示当元素被插入到 DOM 中时。除此之外还有:
      • bind 只调用一次,指令第一次绑定到元素时调用
      • update所在组件的 VNode 更新时调用
      • componentUpdated所在组件的 VNode(包括子 VNode) 更新时调用
      • unbind只调用一次,指令与元素解绑时调用
    一个自定义指令中总共可以自定义五个函数
    • el 表示被绑定的元素,Vue 会自动传入
    1. 定义一个局部指令: x。它可以在你所声明的组件内部使用
        import Vue from 'vue'
        new Vue({
            ...
            directives: {
                'x':{
                    inserted(el) {
                        el.addEventListener('click', () => console.log('局部指令 x'))
                    }
                }
            }
            ...
        }).$mount('#app')
    
  • 以上, directives 的主要作用,就是原生 DOM 操作,减少重复。

组合

  • mixins 混入

    • mixins 的主要作用时减少 data、methods、钩子的重复
    • 当有多个组件需求相同的操作时,抽取其中相同的部分,放在一个 JS 文件里面(比如 mixins/commen.js);
        // commen.js
        
        const commen = { 
            // 抽取的代码 
        }
        
        export default commen
    
    • 当其他组件需要用到这些代码时,使用 mixins 属性导入
        <script>
            import commen from '../mixins/commen.js'
            export default {
                ...
                mixins: [commen],
            }
        <script>
    
    • 混入的规则
      • 组件里的属性和函数会覆盖混入内容中相同的属性和函数
      • 具体规则: 文档
  • extends 继承

    • extends 是比 mixins 更抽象一点的封装
    • 声明一个新的类,把它作为 Vue 的扩展,继承自 Vue
        // myVue.js
        import Vue from 'vue'
        // import commen from '../mixins/commen'
        const myVue = Vue.extend({
            // commen code
            // or
            // mixins: [commen]
        })
        export default myVue
    
    • 组件中引入
        <script>
            import myVue from '../myVue.js'
            export default {
                extends: myVue,
                ...
            }
        <script>
    
    • myVue 同时也可以作为构造函数代替 Vue,生成 Vue 的实例
  • provide (提供) and inject (注入)

    • 用于大范围的 data 和 method 等共用,祖先提供数据,后代注入数据;隔 N 代共享信息
    • provide 提供数据, inject 获取数据
    export default {
        provide(){
            return {
                x: this.x,
                y: this.y
            }
        }
    }
    
    export default {
        inject: ["x", "y"]
    }