JavaScript 进阶营

Vue音乐播放器学习笔记(5) - mixin混合 + ( v

2017-10-15  本文已影响227人  woow_wu7

[一] Vue mixins(混合)

(一) 不同组件引用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




<template>
  <div>
    这是主页面
    <modelA v-show="show"></modelA>
    <div @click="go">点击显示</div>
  </div>
</template>

<script>
  import ModelA from 'components/modela/modela.vue'
  import {mixinUse} from '@/mixin.js'

  export default {
    mixins: [mixinUse],
    components: {
      ModelA
    },
    mounted() {
      console.log('这是主页面的mounted()钩子函数,后执行')
    }
  }
</script>-----------------------------------------------------------------------------------
modelA组件       引用 modelB组件 和 mixin.js




<template>
  <div class="modelA">
    这是model A的内容AAAAAAAAAAA
    <modelB v-show="!show"></modelB>
    <div @click="go" style="margin-top: 20px">点击-显示model'B</div>
  </div>
</template>


<script type="text/ecmascript-6">
  import ModelB from 'components/modelb/modelb.vue'
  import {mixinUse} from '@/mixin.js'

  export default {
    mixins: [mixinUse],
    components: {
      ModelB
    }
  }
</script>



 

(1) 合并 (组件和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})方法)


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

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

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

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

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()生命周期钩子函数,后执行')
    }
  }
</script>


输出结果:
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



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

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

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  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 自定义指令

(1)钩子函数

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

(2)钩子函数参数

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



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

Vue.directive('focus', {

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

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


使用: <input v-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
      }
    }
  }




使用: <div v-color="color">v-color指令,绑定元素内的颜色</div>

           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属性

tab切换


<template>
  <div class="table">
    <div>这是tab组件页面</div>
    <div>
      <div @click="go('Tab1')">选项一</div>
      <div @click="go('Tab2')">选项二</div>
    </div>
    <component :is="currentTab"></component>    // <component>元素绑定is,让组件共用一个挂载点
  </div>
</template>

<script type="text/ecmascript-6">
  import Tab1 from './tab1.vue'
  import Tab2 from './tab2.vue'
  export default {
    data() {
      return {
        currentTab: 'Tab1'
      }
    },
    components: {
      Tab1,
      Tab2
    },
    methods: {
      go(tab) {
        this.currentTab = tab
      }
    }
  }
</script>
效果图
上一篇 下一篇

猜你喜欢

热点阅读