使用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('關閉了') }
      })
    },