开发者社区> 西游不取经> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

添加自定义vue全局方法,同时给自定义的方法 传递component调用其方法

简介: 项目中会遇到一个组件/方法, 在多个地方被调用,比较方便的的方式之一,this.$custom(agruments) 这样就比较方便 ,不然用组件引入的办法调用就就比较麻烦,每可能都需要这样调用 import coustom from '.
+关注继续查看

项目中会遇到一个组件/方法, 在多个地方被调用,比较方便的的方式之一,this.$custom(agruments) 这样就比较方便

,不然用组件引入的办法调用就就比较麻烦,每可能都需要这样调用

import coustom from './coustom'
export default {
	components: {
		coustom
	}
}
<coustom :data="data" v-if="show"></coustom>

换个办法以自定义alert 为例


就这么一句就调用出来
this.$alert('哈哈哈');

alert.vue 如下

<template>
    <transition name="dialog-fade">
        <div v-if="show" class="modal fade dialog-modal" id="alert"  role="dialog" data-backdrop="false" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header row">
                        <h5 class="modal-title col-md-4">提示</h5>
                        <button type="button" class="close" aria-label="Close" @click="close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="col-xs-offset-1">{{message}}</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" @click="close">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    name: 'Alert',
    methods: {
        close: function() {
            this.show = false
        }
    }
}
</script>
对然后将Alert 挂载到vue全局  index.js

function install(Vue) {
    
    Object.defineProperty(Vue.prototype, '$alert', {
        get() {
            let div = document.createElement('div')
            document.body.appendChild(div);
            return (message) => {
                const Constructor = Vue.extend(Alert)
                let Instance = new Constructor({
                    data() {
                        return {
                            message: message,
                            show: true
                        }
                    }
                }).$mount(div);
            };
        }
    });
}

export default install


最后vue.use 一下

import alert from 'index'

Vue.use(alert)

就能直接调用了

当然前面有个坑 transition 的 vue 的过渡 alert的div不是一开始就加载到文档上的,通过后面的 

 document.body.appendChild(div);

动态写入,就造成 alert 显示时看不到transition效果,抛开vue来说也会遇到这样的情况 可以settimeout 下 给append的元素 addClass

同理在vue 中也可以,当然还有更好的办法暂时没想到。。。。


alert 只是纯的 传递一个param 但是需要 传递一个function 时,比如confirem


this.$confirm('请确定你是傻逼', () => console.log('yes')})

还是相同的味道,相同的道理

Confirm.vue

<template>
    <transition name="dialog-fade">
        <div v-if="show" class="modal fade" id="confirm" tabindex="-1" role="dialog" 
            data-backdrop="false"  aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header row">
                        <h5 class="modal-title col-md-4">提示</h5>
                        <button type="button" class="close" @click="close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="col-xs-offset-1">{{message}}</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" @click="close">取消</button>
                        <button type="button" class="btn btn-primary" @click="ConfirmSure">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    name: 'Confirm',
    methods: {
        close: function() {
            this.show = false
        },
        ConfirmSure() {
            this.confirmSure()//确定关闭 由install 传入
            this.close()
        }
    }
}
</script>

import Confirm from './Confirm.vue'

function install(Vue) {

    Object.defineProperty(Vue.prototype, '$confirm', {
        get() {
            let div = document.createElement('div')
            document.body.appendChild(div);
            return (message, confirmSure) => {
                const Constructor = Vue.extend(Confirm)
                const Instance = new Constructor({
                    data() {
                        return {
                            message: message,
                            show: true
                        }
                    },
                    methods: {
                        confirmSure: confirmSure    //确定方法
                    }
                }).$mount(div);
            };
        }
    });
}

export default install


同样use 一下

import alert from 'index' Vue.use(alert)




 this.$confirm('你是猴子请来的唐僧么', () => console.log('yes,哈哈哈哈哈'))


传了两个arguments,累了吧,轻松点,

片分三级,嗯········参数也得 至少能传 三个。。。。


嗯,往哪里看呐···!

这里传递的params 才传递到第二个,才实现第二个功能,要么要实现第三个功能呢,dialog对话框内容,根据环境应用环境传递进去显示 


如此中间的form 表单是动态传递进入的

 <div class="midpass">
        <div class="form-group form-group-inline flex" :class="errors.has('ans') ? 'has-error has-danger' : '' ">
            <label class="form-control-label">1+1=?</label>
            <div class="form-input-longer">
                <input type="password" class="form-control form-control-title" name="ans" v-model="input.value"
                    v-validate="'required|min:1'"  placeholder="请输入答案">
                <div class="help-block">请输入答案</div>
            </div>
        </div>
    </div>
export default {
    name: 'oneaddone',
    data() {
        return {
            input: {
               
                value: null
            }
        }
    }
}



用到了前端验证 vue veevalidate 这样传递进去 要调教数据时,触发验证,就是父组件调用子组件的方法
this.$children 即可

dialog.vue

<template>
    <transition name="dialog-fade">
        <div v-if="show" class="modal fade" id="popform" tabindex="-1" 
            role="dialog" data-backdrop="false" aria-hidden="true">
            <div class="hide" id="formpop-btn" data-toggle="modal" data-target="#popform"></div>
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header row">
                        <h4 class="modal-title col-md-6 col-xs-4">{{message}}</h4>
                        <button type="button" class="close col-md-1" aria-label="Close"  @click="close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <form @submit.prevent="submit">
                        <div class="modal-body">
                            <keep-alive>
                                <component :is="modalBody" ref="forms"></component>
                            </keep-alive>
                        </div>
                        <div class="modal-footer">
                            <div class="center-block" style="width: 230px;">
                                <button type="button" class="btn btn-secondary" @click="close">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'dialog',
    data() {
        return {
            Submit: () => {}
        }
    },
    methods: {
        close() {
            this.show = false
        },
        setSubmit(dataKey, Submit) {
            this.submit = () => {   //给submit btn 设置提交方法
                this.$children.map(function (child) {
                    let data = child.$data[dataKey] //data 的key 调用时传递的 data key 可以根据情景定义
                    child.$validator.validateAll().then((result) => {
                        if (result) {
                            Submit(data).then(res => {
                                if (res) this.close()
                            })
                        }
                    });
                })
            }
        },
    }
}
</script>

再来一遍



import dialog from './dialog.vue'

function install(Vue) {
    Object.defineProperty(Vue.prototype, '$dialog', {
        get() {
            let div = document.createElement('div');
            document.body.appendChild(div);
            return (message, modalBody) => {
                const Constructor = Vue.extend(dialog)
                const Instance = new Constructor({
                    data() {
                        return {
                            message: message,
                            show: true,
                            modalBody: modalBody
                        }
                    }
                }).$mount(div)
                return Instance.setSubmit  //放回 一个方法用于 传递 自定义的数据和 submit 时方法
            };
            
        }
    });
}

export default install
Vue.use 同上
this.$dialog('请计算下面的数学题', resolve => 
                require(['./oneaddone.vue'], resolve))('input', (data) => {
		this.$alert('哈哈哈,正确')
                    console.log(data)
                    return data
                }
            )

PS:这里需要注意的是 this.$dialog()(); 是这样的 因为里面返回的是一个方法,同时$mount 不能直接挂载在body 或者html下 必须在body的 子元素中  所以,createElement('div')

1+1 = 2 答案正确········



有需要的交流的可以加个好友




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
1、引入Vue项目(直接引入、创建步骤、绑定文本/属性/方法)
1、引入Vue项目(直接引入、创建步骤、绑定文本/属性/方法)
0 0
vue父组件调用子组件传递值
vue父子组件调用,避免异常TypeError :Cannot read properties of undefined
0 0
Vue封装全局注册弹窗组件,实现全局调用。
前言 很多网站都会有权限控制,比如一些博客网站的评论系统,必须要用户登录后才能发起评论,如果未登录想要评论,网站则会弹出登录弹窗。这个登录弹窗可以任何需要权限的地方弹出,所以这个弹窗组件我们就必须封装为共有的,共全局调用。
0 0
vue3父组件方法之间方法的互相调用
vue3父组件方法之间方法的互相调用
0 0
vue3.2中setup语法糖父组件如何调用子组件中的方法
vue3.2中setup语法糖父组件如何调用子组件中的方法
0 0
VUE02_表单操作、自定义指令、计算属性、侦听器、过滤器、生命周期、数组(一)
①. 表单操作 ①. 表单基本操作 ②. 表单修饰符 ②. 自定义指令 了解
0 0
+关注
西游不取经
其实呢,我只是一个前端
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
fibjs 模块重构从回调到协程--陈垒
立即下载
低代码开发师(初级)实战教程
立即下载