混入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()    }}