关于vue.js:vue可复用性

混入mixin

罕用场景

有两个类似的组件, 他们基本功能是一样的, 然而他们之前又存在差别,失常思维是: 是把它拆成两个不同的组件呢, 还是保留为一个组件,应用props传值来发明差别从而进行辨别
两个计划都不完满: 如果拆分成两个组件, 你就不得不冒着一旦性能变动就要在两个文件中更新代码的危险,
如果通过props传值很快会变得凌乱, 从而迫使维护者在应用组件的时候必须了解一大段的上下文,拖慢写代码速度

应用mixin, vue中的mixin对编写函数式格调的代码很有用, 因为函数式编程就是通过缩小挪动的局部让代码更好了解. mixin容许你封装一块在利用的其余组件都能够应用的函数, 如果应用切当,他们不会扭转函数作用域内部的任何货色.

根底实例

咱们有一对不同的组件,他们的作用是通过切换状态来展现或者暗藏模态框或者提示框, 这些提示框和模态框除了性能类似以外,没有其余共同点. 他们看起来不一样,用法不一样,然而逻辑一样~~~~

// 模态框
      const Modal = {
        template: '#modal',
        data() {
          return {
            isShowing: false
          }
        },
        methods: {
          toggleShow() {
            this.isShowing = !this.isShowing;
          }
        },
        components: {
          appChild: Child
        }
      }

      // 提示框
      const Tooltip = {
        template: '#tooltip',
        data() {
          return {
            isShowing: false
          }
        },
        methods: {
          toggleShow() {
            this.isShowing = !this.isShowing;
          }
        },
        components: {
          appChild: Child
        }
      }

咱们能够在这里提取逻辑并创立能够被重用的项

 const toggle = {
         data() {
           return {
             isShowing: false
           }
         },
         methods: {
           toggleShow() {
             this.isShowing = !this.isShowing;
           }
         }
       }

       const Modal = {
         template: '#modal',
         mixins: [toggle],
         components: {
           appChild: Child
         }
       };

       const Tooltip = {
         template: '#tooltip',
         mixins: [toggle],
         components: {
           appChild: Child
         }
       };

用法

1. 能够在我的项目里新建一个mixin目录, 创立一个js文件,在文件里须要输入一个对象

1. 在modal.vue文件中引入这个mixin

<template>
    <div>
        <p v-show="isShowing">模态框显示</p>
        <div @click="toggleShow">点击显示暗藏</div>
    </div>

</template>
<script>
import {
    toggle
} from './mixins/toggle'
export default {
    name: 'modal',
    data() {
            return {
        }
    },
    mixins: [toggle]
}

</script>

选项合并

当组件和混入对象有同名选项时,这个选项会以失当的形式进行合并

1. 数据对象会在外部进行递归合并,发生冲突会以组件为先
2. 同名的钩子函数会合并为一个数组, 将都被调用.混入对象的钩子将在组件钩子前调用
3. 值为对象的选项, 比方methods components 和 directives, 将会合并为一个对象, 当对象键值对抵触时, 将会以组件为主

自定义组件

简介

vue容许自定义组件. 有些状况下, 也须要对原生dom进行操作.这时候就须要应用自定义组件
例子: 输入框,默认聚焦

<input v-focus />
directives: {   
    focus: {
        inserted: function (el) {
            el.focus();
        }
    }
}

钩子函数

一个自定义组件有以下钩子函数

1. bind 只调用一次,指令第一次绑定元素时调用, 在这里能够进行初始化设置
2. inserted 被绑定元素插入父节点时调用
3. update 所在组件的vnode更新时调用
4. componentUpdated 指令所在组件vnode及其子vnode全副更新后调用
5. unbind 只调用一次, 指令与元素解绑时调用

过滤器

vue容许你自定义过滤器. 可被用于一些罕用的文件格式化.过滤器能够用在两个中央：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始反对)。过滤器应该被增加在 JavaScript 表达式的尾部，由“管道”符号批示：

<input v-focus v-model="message" />

<div id="hook-arguments-example">{{message | capitalize}}</div>


filters: {
    capitalize: function (value) {
        return value.toUpperCase()
    }
}