vue可复用性

时间 2020-09-29

标签 vue 用性繁體版

原文原文链接

混入mixin

经常使用场景

有两个类似的组件, 他们基本功能是同样的, 可是他们以前又存在差别,正常思惟是: 是把它拆成两个不一样的组件呢, 仍是保留为一个组件,使用props传值来创造差别从而进行区分
两个方案都不完美: 若是拆分红两个组件, 你就不得不冒着一旦功能变化就要在两个文件中更新代码的风险,
若是经过props传值很快会变得混乱, 从而迫使维护者在使用组件的时候必须理解一大段的上下文,拖慢写代码速度vue

使用mixin, vue中的mixin对编写函数式风格的代码颇有用, 由于函数式编程就是经过减小移动的部分让代码更好理解. mixin容许你封装一块在应用的其余组件均可以使用的函数, 若是使用得当,他们不会改变函数做用域外部的任何东西.node

基础实例

咱们有一对不一样的组件,他们的做用是经过切换状态来展现或者隐藏模态框或者提示框, 这些提示框和模态框除了功能类似之外,没有其余共同点. 他们看起来不同,用法不同,可是逻辑同样~~~~编程

// 模态框
      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
        }
      }

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

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
         }
       };

用法

能够在项目里新建一个mixin目录, 建立一个js文件,在文件里须要输出一个对象

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

选项合并

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

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

自定义组件

简介

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

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

钩子函数

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

bind 只调用一次,指令第一次绑定元素时调用, 在这里能够进行初始化设置
inserted 被绑定元素插入父节点时调用
update 所在组件的vnode更新时调用
componentUpdated 指令所在组件vnode及其子vnode所有更新后调用
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()
    }
}