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

今天药忘吃喽~ 2021-11-09 13:18 415阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，415人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue使用之自定义指令、组件开发和组件通讯

vue使用之自定义指令、组件开发和组件通讯 vue使用之自定义指令、组件开发和组件通讯 1 自定义指令 1.1 自定义指令-钩子函数

傷城~/ 2023年02月24日 15:30/ 0 赞/ 4 阅读

相关 vue自定义组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

客官°小女子只卖身不卖艺/ 2022年09月09日 11:45/ 0 赞/ 295 阅读

相关 vue开发自定义的全局公共组件

这里我主要介绍两种自定义全局公共组件的方法（1）第一种：首先在`components`中新建一个文件夹，我这里做的是全局加载动画组件所以命名的是`Loading`文

左手的ㄟ右手/ 2022年09月06日 13:28/ 0 赞/ 319 阅读

相关 vue自定义组件

一、无参组件首先利用VUE-CLI创建一个vue项目（不用vue-cli也行此处只是原来建立好了，方便演示） ![在这里插入图片描述][watermark_

- 日理万妓/ 2022年09月02日 13:00/ 0 赞/ 290 阅读

相关 Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

港控/mmm°/ 2022年07月12日 14:51/ 0 赞/ 302 阅读

相关 Vue 自定义组件使用v-model

正常的业务需求中，我们需要封装一些常用的组件。现在有一个最简单的需求，封装一个有特定样式的input框，够简单吧？好，我们来这样封装：字符串模板文件命名为 CInput

╰+攻爆jí腚メ/ 2022年06月12日 08:16/ 0 赞/ 411 阅读

相关自定义vue日历组件

今天给大家介绍一下，如何在vue中实现自定义日历组件，功能类似FullCalendar插件，但是却比较灵活。先给大家看一下组件的效果图，如下所示： ![640_wx_fm

短命女/ 2022年05月27日 03:30/ 0 赞/ 532 阅读

相关 vue插件（自定义组件或js文件使用），vue.extend()，vue.component()注册组件

一、vue.use()自定义组件或者引用第三方组件（即vue文档中的插件）？参考：https://cn.vuejs.org/v2/guide/plugins.html

淩亂°似流年/ 2022年05月24日 07:18/ 0 赞/ 261 阅读

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

index.js import Vue from 'vue' import tip from './tip.vue' const Const

今天药忘吃喽~/ 2021年11月09日 13:18/ 0 赞/ 416 阅读

相关 vue 通讯录自定义组件

在线demo：[http://tangyupeng.top/dist/index.html\/phone][http_tangyupeng.top_dist_index.htm

Myth丶恋晨/ 2021年09月16日 13:12/ 0 赞/ 519 阅读