vue命令式组件和插件编写

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

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

        this.$notify({

          title: '偏移',

          message: '这是一条带有偏移的提示消息',

          offset:

        });

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

编写组件代码，也就是.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: #;

    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:)

}

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:

          });

效果：页面右上角一个消息通知，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>

效果：

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

巴特西

vue命令式组件和插件编写

最新文章

热门文章