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

时间:2019-06-14
本文章向大家介绍使用vue的extend自定义组件开发，主要包括使用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('关闭了') }
      })
    },

　　

原文地址：https://www.cnblogs.com/yiyi17/p/11025406.html

随机文章
Javascript知识点必读
最近更新