Vue音乐播放器学习笔记(5) - mixin混合 + ( vm.$options ) + ( Vue.extend( options ) ) + ( Vue.directive全局自定义指令 和 directives局部自定义指令 ) + ( 动态组件 和 is属性 )

[一] Vue mixins(混合)

• 作用：为组件定义可复用的方法，可以在 mixin对象 里定义组件的任何属性，在组件使用mixin时，mixin中的属性会添加到组件属性中
  http://web.jobbole.com/91664/
  http://www.jianshu.com/p/393dcfa6f83e

(一) 不同组件引用mixin

mixin.js       



export const mixinUse = {
  data() {
    return {
      show: false
    }
  },
  created() {
    this.go()
  },
  methods: {
    go() {
      this.show = !this.show
    }
  },
  mounted() {
    console.log('这是mixin中的mounted()钩子函数,先执行')
  }
}
-----------------------------------------------------------------------------------
hellowWorld.vue    主页面，引用 modelA组件 和 mixin.js






-----------------------------------------------------------------------------------
modelA组件       引用 modelB组件 和 mixin.js











 

(1) 合并 (组件和mixin中相同生命周期钩子函数的执行顺序)

• 当我们在组件上应用Mixin的时候，有可能组件与Mixin中都定义了相同的生命周期钩子，这时候钩子的执行顺序的问题凸显了出来。默认Mixin上会首先被注册，组件上的接着注册，这样我们就可以在组件中按需要重写Mixin中的语句。组件拥有最终发言权。

(2) 冲突 (组件和mixin中都有同名的method方法时，mixin中的方法被重写)

//mixin


const hi = {
  methods: {
    sayHello: function() {
      console.log('hello from mixin!')
    }
  },
  mounted() {
    this.sayHello()
  }
}

-----------------------------------------------------------------------------
//vue instance or component



new Vue({
  el: '#app',
  mixins: [hi],
  methods: {
    sayHello: function() {
      console.log('hello from Vue instance!')
    }
  },
  mounted() {
    this.sayHello()
  }
})
 
// Output in console
> hello from Vue instance!
> hello from Vue instance!

你可能已经注意到这有两个console.log而不是一个——

这是因为第一个函数被调用时，没有被销毁，它只是被重写了。我们在这里调用了两次sayHello()函数。

(二) 全局mixin（使用Vue.mixin({xxx})方法）

• 全局Mixin被注册到了每个单一组件上。因此，它们的使用场景极其有限并且在使用的时候我们需要非常小心。一个我能想到的用途就是类似于插件，你需要赋予它访问所有东西的权限。但即使在这种情况下，我也对你正在做事情的充满警惕，尤其当你打算为应用增加通能的时候，这样做可能对你来说是个潘多拉的盒子。

Vue.mixin({
  mounted() {
    console.log('hello from mixin!')
  }
})
 
new Vue({
  ...
})

(1) 合并 (全局mixin与组件内mixin 中的生命周期钩子函数的执行顺序)

• 每次创建组件时，全局mixin都会添加到组件实例中，如果全局mixin和组件内mixin有同名的钩子函数，钩子函数都会执行，并且先执行先执行全局后执行组件内。

(2) 冲突 (全局mixin与组件内mixin 中的非钩子函数冲突时，全局mixin被重写)

• 对于非钩子函数，组件实例的对象属性，组件内的会覆盖全局的。

(3) 实现全局mixin的钩子函数在指定组件中执行／不执行

• 在时机使用过程中，如果希望钩子函数中的代码只在指定的组件中执行，可以使用组件自定义options来实现( vm.$options )

main.js中的全局mixin 


Vue.mixin({
  created() {
    if (this.$options['isMixin']) {    // 如果组件中存在isMixin的自定义选项，就往下执行
      console.log('如果组件isMixin选项存在就输出这段文字')
    }
  }
})

---------------------------------------------------------------------------
helloWorld.vue组件


  export default {
    isMixin:{
      a:true   // 这里可以随便写，只要ismixin存在即可
    },
    created() {
      console.log('组件中的console.log')
    },
    mounted() {
      console.log('这是主页面的mounted()生命周期钩子函数，后执行')
    }
  }



输出结果：
main.js?1c90:19如果组件isMixin选项存在就输出这段文字
HelloWorld.vue?3c12:24组件中的console.log
HelloWorld.vue?3c12:27这是主页面的mounted()生命周期钩子函数，后执行

总结：Vue混合策略

vue ( mixin ) 和 组件 有相同的生命周期钩子函数时候，执行顺序是：先执行mixin再组件

vue ( mixin ) 和 组件 有相同非钩子函数时候，执行组件中的非钩子函数，mixin都被重写

对于钩子函数，会添加到一个函数数组里，执行顺序从前到后

对于组件的对象属性（methods等）,后面的会覆盖前面的

最好不要用全局mixin

---

[二] vm.$options

• 类型：Object
• 详细：用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处

new Vue({
  customOption: 'foo',      // customOption是实例的初始化选项
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

----------------------------------------------------------------------------------------

new Vue({
  el: '#app',
  router,
  template: '',
  components: {App},
  author: {
    name: 'wu',
    age: '27'
  },
  created() {
    console.log(this.$options.author, 'this.$options')  
         // => Object {name: "wu", age: "27"} "this.$options"
  }
})

[三] Vue.extend( options )

参数：
{Object} options
用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。它的目的是创建一个Vue的子类并且返回相应的 constructor。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

[四] Vue.directive 自定义指令

• directive是指令的意思
  (官网) https://cn.vuejs.org/v2/guide/custom-directive.html#钩子函数
  http://www.jianshu.com/p/6d7d27625a56

(1)钩子函数

指令定义函数提供了几个钩子函数 (可选)：

• bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• inserted：被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
• unbind：只调用一次，指令与元素解绑时调用。

(2)钩子函数参数

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  name：指令名，不包括 v- 前缀。
  value：指令的绑定值，例如：v-my-directive="1 + 1", value 的值是 2。
  oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  expression：绑定值的字符串形式。例如 v-my-directive="1 + 1" ，expression 的值是 "1 + 1"。
  arg：传给指令的参数。例如 v-my-directive:foo，arg 的值是 "foo"。
  modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
  vnode：Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
  oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

全局自定义指令：Vue.directive('xx', { xx })
获取焦点



// 注册一个全局自定义指令 v-focus，作用：获取焦点

Vue.directive('focus', {

    // inserted钩子函数，作用：当绑定元素插入到 DOM 中
    // 钩子函数参数： el绑定的元素，binding对象(包含name,value,arg等)

  inserted: function (el, binding) {  
    // 聚焦元素
    el.focus()
  }
})


使用： 


 // inserted钩子函数：被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于document 中)。


-----------------------------------------------------------------------

/*简单模式*/
Vue.directive('minLength',function(){
  /*在bind和update阶段触发*/
})

局部自定义指令：组件中接受一个 directives 的选项： (注意：这里是directives，是复数)
改变字体颜色


directives: {
  focus: {
    // 指令的定义---
    inserted: function (el, binding) {}
  }
}
--------------------------------------------------------------------------------------


  export default {
    directives: {   // 局部自定义指令，注意有s
      color: {    // v-name
        inserted: function(el, binding) {  // inserted钩子函数，绑定元素插入DOM中时生效
          el.style = 'color:' + binding.value    // el指令绑定的元素，binding对象，有value等属性
        }
      }
    },
    data() {
      return {
        model: '',
        showOrHide: true,
        color: 'red'
      }
    },
//    mixins: [mixinUse],
    components: {
      ModelA
    },
    isMixin: {
      a: true
    },
    created() {
      console.log('组件中的console.log')
    },
    mounted() {
      console.log('这是主页面的mounted()生命周期钩子函数，后执行')
    },
    methods: {
      xianShi() {
        this.showOrHide = !this.showOrHide
      }
    }
  }




使用： 
v-color指令，绑定元素内的颜色

           data() {
             return {
               color: 'red'
            }

(3)注意：当使用路由并且使用keep-alive的时候，自定义指令(v-focus)在inserted等钩子函数中使用获得焦点的函数将失效，因为keep-alive会保存状态，没有重新加载，即el绑定的元素已经插入dom中，所以inserted失效，这时要使用keep-alive对应的生命周期钩子函数( activated ) ，keep-alive 组件激活时调用。( deactivated 停用时调用 )

   activated() {
      this.$refs.input2.focus()
    }

[5] 动态组件 和 is属性

• 通过使用保留的 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换：
• is属性 : 用于动态组件且基于 DOM 内模板的限制来工作。

tab切换

效果图