使用vue的extend自定义组件开发

index.js

import Vue from 'vue' import tip from './tip.vue'  const Constructor = Vue.extend(tip);  const Tip = (options={})=>{     options.showAlert = options.fn//传来的fn给options，赋值data     const vm = new Constructor({         data:options     })     vm.$mount()     document.body.appendChild(vm.$el)     vm.visible = true     return vm }  export default Tip 

　　tip.vue

<template>     <div class="tip-0">         <div class="tip" v-show="visible" @click="tipHide()">{{message}}</div>     </div> </template> <script> export default {     data(){         return{             visible:true,             message:9999,             showAlert:null//接收传来的fn         }     },     methods:{         tipHide(){             this.showAlert()             this.visible = false;         }     } } </script> 

　　使用

<button @click="showTip()">tip</button>  import Tip from './components/tip'  showTip(){       Tip({         message:2222,          fn: () => { alert('关闭了') }       })     },