vue命令式组件和插件编写

一直在写各种业务，好多基本用法都忘记了，回顾一下：

一、vue各种UI库里的命令式组件比如element-ui里Notification组件，可以这样调用

        this.$notify({
          title: '偏移',
          message: '这是一条带有偏移的提示消息',
          offset: 100
        });

命令式调用的组件写法分三步：

• 编写组件代码，也就是.vue文件
• Vue.extend()继承扩展组件，编写组件调用逻辑
• 挂载到Vue原型上，使得每个组件实例可以调用

这里简单写个message组件演示一下

1.编写message.vue文件：

<template>
<div class="message" v-if="show">
    {{label}}
</div>
</template>
<script>
export default {
data () {
return {
    label:'空消息',
    show:true
　　}
　}
}
</script>
<style lang="scss">
.message{
    position:fixed;
    top:20px;
    right: 10px;
    color: #fff;
    background-color: #222;
    padding: 15px 20px;
    width: 180px;
}
</style>

2.实现调用逻辑，messagefun.js文件

import Vue from 'vue'
import Message from './message.vue'

const Msg = Vue.extend(Message);
export default  (options={}) => {
    const instance = new Msg({
        el:document.createElement('div'),
        data(){
            return{
                label:options.label
            }
        }
    })
    document.body.appendChild(instance.$el);
    window.setTimeout(()=>{
        instance.$data.show=false
    },options.time?options.time:3000)
}

3.挂载到原型，index.js里

import Vue from 'vue'
import P3 from 'pages/index3.vue'
import Coms from 'pages/page3com/com.js'
import msg from 'pages/page3com/messagefun.js'
Vue.use(Coms)

Vue.prototype.$msg = msg;

new Vue({
    el: '#p3',
    render: h => h(P3)
})

4.调用

      this.$msg(
          {
          label:'我是一个消息',
          time:4000
          });

效果：页面右上角一个消息通知，4秒后自动消失

 

 

二、插件定义编写步骤

• 编写组件代码，即.vue文件
• 统一将组件在插件的install方法里注册为全局组件
• Vue.use(custom)之后即可使用

 1.定义两个简单的组件，com1.vue和com2.vue

//com2.vue
<template>
  <div class="demo">
      <button :style="{color:color}">我是插件二</button>
  </div>
</template>
<script>
export default {
    name:'com2',
    props:{
        color:{
            type:String,
            required:false,
            default:'#333'
        }
    }
}
</script>


//com1.vue
<template>
  <div class="demo">
      <button :style="{color:color}">我是插件一</button>
  </div>
</template>
<script>
export default {
    name:'com1',
    props:{
        color:{
            type:String,
            required:false,
            default:'#333'
        }
    }
}
</script>

2.注册全局组件，com.js

import Vue from 'vue'
import Com1 from './com1.vue'
import Com2 from './com2.vue'

const coms = [
    Com1,
    Com2
]
const install = function(Vue){
    coms.forEach(component => {
        Vue.component(component.name,component)
    })
}
/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
  }

  export default {
      install,
      Com1,
      Com2
  }

3.在index.js里引入并Vue.use()使用组件（use方法会调用对象的install方法）

import Vue from 'vue'
import P3 from 'pages/index3.vue'
import Coms from 'pages/page3com/com.js'
import msg from 'pages/page3com/messagefun.js'
Vue.use(Coms)

Vue.prototype.$msg = msg;

new Vue({
    el: '#p3',
    render: h => h(P3)
})

4.使用这两个组件

<template>
  <div class="demo">
      <com1></com1>
      <com2 color="red"></com2>
  </div>
</template>

效果：

 

以上组件都写的比较简单，不过复杂的组件只是组件内部逻辑代码复杂，编写和使用流程再上边已经阐述完毕。