一直在写各种业务，好多基本用法都忘记了，回顾一下：
一、vue各种UI库里的命令式组件比如element-ui里Notification组件，可以这样调用
this.$notify({ title: ‘偏移‘, message: ‘这是一条带有偏移的提示消息‘, offset: 100 });
命令式调用的组件写法分三步：
这里简单写个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秒后自动消失
二、插件定义编写步骤
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>
效果：
以上组件都写的比较简单，不过复杂的组件只是组件内部逻辑代码复杂，编写和使用流程再上边已经阐述完毕。
原文：https://www.cnblogs.com/yifeng555/p/12602119.html