龚箭

Vue进阶构造属性

Vue进阶构造属性

  1. Directive自定义指令
  2. mixins混入(复制)
  3. extends
  4. provide
  5. inject

1.Directive自定义指令

开发者可以通过directive实现自定义指令,实例如下

    <template>
        <div>
            <button v-click="test">触发自定义指令</button>
        </div>
    </template>
    <script>
        export default{
            directive:{
                click:{
                    //用于初始化是绑定单击事件
                    inserted(el,info){
                        el.addEventListenet(info.name,info.value)
                    },
                    //事件销毁前移除单击事件
                    unbind(el,info){
                        el.removeEventListenet(info.name,info.value)
                    }
                }
            },
            methods:{
                test(){
                    console.log("自定义事件被触发")
                }
            }
        }
    </script>

上述代码简述了directive自定义指令的使用,所用的指令都是v-,注册指令是只需要注册 的名称.

2.mixins混入(可以理解为复制)

mixins混入,可以理解成组件间的共有方法;应用场景:在多个组件中使用一个共同的方法或者属性,就可以将这个重复的方法或者属性抽离出组件,通过mixins混入的方式引入到各个组件中,由于需要多个文件才能展示出他的用法;请移步到github查看实例代码(components/mixin.vue & components/MIxinComponents & minxins).

  • mixins的作用是为了减少data\methods\钩子的重复

3.extends继承(可以理解为复制)

extends是比mixins更抽象的封装,用法和extends类似,应用场景也是相同.

4.provide(提供) && inject(注入)

父组件provide(提供)参数或者方法 子组件inject()注入拿到父组件参数
父子组件之间可以跨N级.
代码示例移步到github

47

文章

12

标签