使用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

时间: 2024-10-02 11:14:58

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

Flex自定义组件开发之日周月日期选择日历控件

原文:Flex自定义组件开发之日周月日期选择日历控件 使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的任一位置单击时,将弹出一个 DateChooser 控件,显示当月的所有日期.如果未选择日期,则该文本字段为空白,并且 DateChooser 控件中将显示当前日期的月份.当 DateChooser 控件处于打开状态时,用户可以在各个月份和年份之间滚动,并选择某个日期.选择日期后,DateChooser 控件关闭,

Flex自定义组件开发 - jackyWHJ

一般情况下需要组件重写都是由于以下2个原因: 1.在FLEX已有组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展. 2.为了模块化设计或进一步重用,需要对FLEX组件进行组合. 而Flex组件开发有2种方式: AS方式和MXML方式.对于上述第一个原因我一般采用AS方式,通过继承 UIComponent来开发,而针对原因2我一般使用的是 MXML方式.本文主要讲的是AS开发方式. 重写一个组件依次调用的方法 : 1)Constructor构造方法,初始化属性,默认值 在这

talend自定义组件开发以及实现原理简介

talend open studio(TOS)有自定义组件开发模块,默认视图中可能不会显示,需要在Windows-perspective-Component Designer中打开. 第一次进入到component开发界面中是不能新建component项目或者打开component的,需要先在TOS中设置一下: 1.修改Windows-preferences-Talend-Components中的User component folder,指定一个文件夹作为自定义组件存放的地址,重启TOS之后该

vue框架之自定义组件中使用v-model

通常 vue在html常见表单空间支持v-model双向绑定例如 1 <input v-model="message" placeholder="edit me"> 2 <p>Message is: {{ message }}</p> 1,当我们自定义组件时如何使用v-model? 答:代码实例如下 2 我们在自定义组件中使用v-model的目的是什么? 答:自定义模板上定义v-mode目的是向外传递值,也就是向他的父组件传递值,

vue.js2.0 自定义组件初体验

理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 创建单文件组件 <template> </template> <script> export default { }; </script> <style lang="st

Vue.js的复用组件开发流程

本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件,同时可以根据不同的参数来决定当前列表是带按钮的列表or带箭头的列表. 首先看看quiList.vue //quiList.vue <template> <div class="qui-list"> &

jquery自定义组件开发

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件. 第一步要知道封装jquery组件的基本语法 (function ($) { $.fn.ziDinYiZuJian = function () { //ziDinYiZuJian 组件 要实现的功能代码 } })(jQuery) 第二步调用自定义的组件 调用组件必须要引入在组件中用到的js包,然后调用 <div id="dom"></div> $('#

Vue组件开发分享

在开始本文之前,你可能需要先了解以下相关内容: Vue.js  一款高性能轻量化的MVVM框架 Webpack  前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们在开发高可用组件时可以更加专注于数据逻辑开发: 忘记DOM操作,忘记事件绑定,让开发的专注力集中于数据上: 1.定义需要使用的数据及类型 2.在合适的时机更新数据 3.在模板上绑定数据与视图的映射关系 4.开放对外调用接口 代码 https://github.com/xiaoyunchen/vue-

Vue.extend提供自定义组件的构造器

Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用“扩展实例构造器”来生产组件实例,并挂载到自定义元素上. 自定义无参数标签 我们想象一个需求,需求是这样的,要在博客页面多处显示作者的网名,并在网名上直接有链接地址.我们希望在html中只需要写<message></message> ,这和自定义组件很像,但是他没有传递