Vue.js组件可复用性的混合(mixin)方式和自定义指令

未东兴发布于2019-08-21 16:17 / 1714人阅读

摘要：注意，在里面，代码复用的主要形式和抽象是组件然而，有的情况下你仍然需要对纯元素进行底层操作这时候就会用到自定义指令。注册一个全局自定义指令当绑定元素插入到中。

混合是什么

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
例如:

var tpl1={
    template:"#stpl1",
    data:function(){
        return {msg:false}
    },
    methods:{
        msgf:function(){
            this.msg=!this.msg
        }
    }
}
var tpl2={
    template:"#stpl2",
    data:function(){
        return {msg:false}
    },
    methods:{
        show:function(){
            this.msg=true
        },
        hide:function(){
            this.msg=false
        }
    }
}
new Vue({
    el:"#box",
    components:{
        tpla:tpl1,
        tplb:tpl2,
    }
})

我们会发现,两个组件中的数据大多数相同,这是我们可以将它们进行混合

// 首先,定义一个混合对象
var mymixin = {
    data:function(){
        return {msg:false}
    },
    methods:{
        show:function(){
            this.msg=true
        },
        hide:function(){
            this.msg=false
        },
        msgf:function(){
            this.msg=!this.msg
        }
    }
}
var tpl1={
    template:"#stpl1",
    minins:[mymixin]
}
var tpl2={
    template:"#stpl2",
    minins:[mymixin]
}
// 如果我们需要在第一个组件定义data为true时,我们可以直接在组件内定义,他会覆盖mixin的data
var tpl1={
    template:"#stpl1",
    minins:[mymixin],
    data:function(){
        msg:true
    }
}

自定义指令

除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。

// 注册一个全局自定义指令 v-focus
Vue.directive("focus", {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

也可以注册局部指令，组件中接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义---
  }
}

然后你可以在模板中任何元素上使用新的 v-focus 属性：

GPU云服务器云服务器自定义指令自定义指令实例自定义选择组件定义方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88365.html

Vue 混合、自定义指令、插件

摘要：当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合自定义指令除了默认设置的核心指令和也允许注册自定义指令。 vue的复用性与组合混合混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合 ...

whlong 2019-08-21 16:17 评论0 收藏0
Vue的混合、自定义指令和插件

摘要：可复用性和组合混合混合是一种分发组件中可复用功能的非常灵活的方式。官方例子定义一个混合对象定义一个使用混合对象的组件自定义指令允许自定义指令。可复用性和组合混合混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。 showImg(https://segment...

wwolf 2019-08-21 16:17 评论0 收藏0
vue.js学习和实战笔记

摘要：第二个是其值是或，确认是否深入监听。一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到第三个是其值是或，确认是否以当前的初始值执行的函数。混合定义来分发组件中的可复用功能结束，撒花文章已同步我的笔记，欢迎大家加，加后人生更加美好 vue.js记录文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~，加star后...

Pandaaa 2019-08-23 12:10 评论0 收藏0
VUE2.0学习笔记

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖，会扩展成一个更新父组件绑定值的侦听器。如果需要条件渲染多个元素，可以使用包裹。 1.前言安装直接用引入（本地或者cdn） npm npm install vue vue-cli官方脚手架 # 全局安装 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 评论0 收藏0
前端面试题总结——VUE（持续更新中）

摘要：前端面试题总结持续更新中是哪个组件的属性模块的组件。都提供合理的钩子函数，可以让开发者定制化地去处理需求。前端面试题总结——VUE（持续更新中） 1.active-class是哪个组件的属性？ vue-router模块的router-link组件。 2.嵌套路由怎么定义？在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 //引入两个组件 ...

SimonMa 2019-08-22 16:08 评论0 收藏0