//下面的方式就是自定义组件或方法的方式

Vue.use(Object.defineProperty(Vue.prototype, '$eventHub', {  

 

    get() {  
        return new Vue({
data () {
   return {
     // 定义数据
       val: ''
   }
},
created () {
   // 绑定监听
   this.$on('eventHub', (val)=>{
       this.val = val
   })
}
});
    }  

 

}))

发送数据到eventHub

this.$eventHub.$emit('eventHub', { 
    data:"data"

   });

 

需要使用数据的地方接收eventHub

computed:{
          val () {
                return eventHub.val
          }
}

从这里开始是转载::::::::::::::::::::::::::::::::::

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

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

 

[javascript] view plain copy

  1. import coustom from './coustom'  
  2. export default {  
  3.     components: {  
  4.         coustom  
  5.     }  
  6. }  
  7. <coustom :data="data" v-if="show"></coustom>  


换个办法以自定义alert 为例

 

 

 

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

alert.vue 如下

[javascript] view plain copy

  1. <template>  
  2.     <transition name="dialog-fade">  
  3.         <div v-if="show" class="modal fade dialog-modal" id="alert"  role="dialog" data-backdrop="false" aria-hidden="true">  
  4.             <div class="modal-dialog" role="document">  
  5.                 <div class="modal-content">  
  6.                     <div class="modal-header row">  
  7.                         <h5 class="modal-title col-md-4">提示</h5>  
  8.                         <button type="button" class="close" aria-label="Close" @click="close">  
  9.                             <span aria-hidden="true">×</span>  
  10.                         </button>  
  11.                     </div>  
  12.                     <div class="modal-body">  
  13.                         <div class="col-xs-offset-1">{{message}}</div>  
  14.                     </div>  
  15.                     <div class="modal-footer">  
  16.                         <button type="button" class="btn btn-primary" @click="close">确定</button>  
  17.                     </div>  
  18.                 </div>  
  19.             </div>  
  20.         </div>  
  21.     </transition>  
  22. </template>  
  23. <script>  
  24. export default {  
  25.     name: 'Alert',  
  26.     methods: {  
  27.         close: function() {  
  28.             this.show = false  
  29.         }  
  30.     }  
  31. }  
  32. </script>  

 

对然后将Alert 挂载到vue全局  index.js

 

 

 

[javascript] view plain copy

  1. function install(Vue) {  
  2.       
  3.     Object.defineProperty(Vue.prototype, '$alert', {  
  4.         get() {  
  5.             let div = document.createElement('div')  
  6.             document.body.appendChild(div);  
  7.             return (message) => {  
  8.                 const Constructor = Vue.extend(Alert)  
  9.                 let Instance = new Constructor({  
  10.                     data() {  
  11.                         return {  
  12.                             message: message,  
  13.                             show: true  
  14.                         }  
  15.                     }  
  16.                 }).$mount(div);  
  17.             };  
  18.         }  
  19.     });  
  20. }  
  21.   
  22. export default install  

 

 

最后vue.use 一下

 

[javascript] view plain copy

  1. import alert from 'index'  
  2.   
  3. Vue.use(alert)  


就能直接调用了

 

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

[javascript] view plain copy

  1. document.body.appendChild(div);  

 

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

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

 

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

 

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

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

Confirm.vue

 

[javascript] view plain copy

  1. <template>  
  2.     <transition name="dialog-fade">  
  3.         <div v-if="show" class="modal fade" id="confirm" tabindex="-1" role="dialog"   
  4.             data-backdrop="false"  aria-hidden="true">  
  5.             <div class="modal-dialog" role="document">  
  6.                 <div class="modal-content">  
  7.                     <div class="modal-header row">  
  8.                         <h5 class="modal-title col-md-4">提示</h5>  
  9.                         <button type="button" class="close" @click="close">  
  10.                             <span aria-hidden="true">×</span>  
  11.                         </button>  
  12.                     </div>  
  13.                     <div class="modal-body">  
  14.                         <div class="col-xs-offset-1">{{message}}</div>  
  15.                     </div>  
  16.                     <div class="modal-footer">  
  17.                         <button type="button" class="btn btn-info" @click="close">取消</button>  
  18.                         <button type="button" class="btn btn-primary" @click="ConfirmSure">确定</button>  
  19.                     </div>  
  20.                 </div>  
  21.             </div>  
  22.         </div>  
  23.     </transition>  
  24. </template>  
  25. <script>  
  26. export default {  
  27.     name: 'Confirm',  
  28.     methods: {  
  29.         close: function() {  
  30.             this.show = false  
  31.         },  
  32.         ConfirmSure() {  
  33.             this.confirmSure()//确定关闭 由install 传入  
  34.             this.close()  
  35.         }  
  36.     }  
  37. }  
  38. </script>  

 

[javascript] view plain copy

  1. import Confirm from './Confirm.vue'  
  2.   
  3. function install(Vue) {  
  4.   
  5.     Object.defineProperty(Vue.prototype, '$confirm', {  
  6.         get() {  
  7.             let div = document.createElement('div')  
  8.             document.body.appendChild(div);  
  9.             return (message, confirmSure) => {  
  10.                 const Constructor = Vue.extend(Confirm)  
  11.                 const Instance = new Constructor({  
  12.                     data() {  
  13.                         return {  
  14.                             message: message,  
  15.                             show: true  
  16.                         }  
  17.                     },  
  18.                     methods: {  
  19.                         confirmSure: confirmSure    //确定方法  
  20.                     }  
  21.                 }).$mount(div);  
  22.             };  
  23.         }  
  24.     });  
  25. }  
  26.   
  27. export default install  

 

 

同样use 一下

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

 

 

[javascript] view plain copy

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

 

 

 

 

 

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

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

嗯,往哪里看呐···!

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

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

 

[javascript] view plain copy

  1. <div class="midpass">  
  2.        <div class="form-group form-group-inline flex" :class="errors.has('ans') ? 'has-error has-danger' : '' ">  
  3.            <label class="form-control-label">1+1=?</label>  
  4.            <div class="form-input-longer">  
  5.                <input type="password" class="form-control form-control-title" name="ans" v-model="input.value"  
  6.                    v-validate="'required|min:1'"  placeholder="请输入答案">  
  7.                <div class="help-block">请输入答案</div>  
  8.            </div>  
  9.        </div>  
  10.    </div>  

[javascript] view plain copy

  1. export default {  
  2.     name: 'oneaddone',  
  3.     data() {  
  4.         return {  
  5.             input: {  
  6.                  
  7.                 value: null  
  8.             }  
  9.         }  
  10.     }  
  11. }  

 

 

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

this.$children 即可

 

dialog.vue

 

[javascript] view plain copy

  1. <template>  
  2.     <transition name="dialog-fade">  
  3.         <div v-if="show" class="modal fade" id="popform" tabindex="-1"   
  4.             role="dialog" data-backdrop="false" aria-hidden="true">  
  5.             <div class="hide" id="formpop-btn" data-toggle="modal" data-target="#popform"></div>  
  6.             <div class="modal-dialog" role="document">  
  7.                 <div class="modal-content">  
  8.                     <div class="modal-header row">  
  9.                         <h4 class="modal-title col-md-6 col-xs-4">{{message}}</h4>  
  10.                         <button type="button" class="close col-md-1" aria-label="Close"  @click="close">  
  11.                             <span aria-hidden="true">×</span>  
  12.                         </button>  
  13.                     </div>  
  14.                     <form @submit.prevent="submit">  
  15.                         <div class="modal-body">  
  16.                             <keep-alive>  
  17.                                 <component :is="modalBody" ref="forms"></component>  
  18.                             </keep-alive>  
  19.                         </div>  
  20.                         <div class="modal-footer">  
  21.                             <div class="center-block" style="width: 230px;">  
  22.                                 <button type="button" class="btn btn-secondary" @click="close">取消</button>  
  23.                                 <button type="submit" class="btn btn-primary">保存</button>  
  24.                             </div>  
  25.                         </div>  
  26.                     </form>  
  27.                 </div>  
  28.             </div>  
  29.         </div>  
  30.     </transition>  
  31. </template>  
  32.   
  33. <script>  
  34. export default {  
  35.     name: 'dialog',  
  36.     data() {  
  37.         return {  
  38.             Submit: () => {}  
  39.         }  
  40.     },  
  41.     methods: {  
  42.         close() {  
  43.             this.show = false  
  44.         },  
  45.         setSubmit(dataKey, Submit) {  
  46.             this.submit = () => {   //给submit btn 设置提交方法  
  47.                 this.$children.map(function (child) {  
  48.                     let data = child.$data[dataKey] //data 的key 调用时传递的 data key 可以根据情景定义  
  49.                     child.$validator.validateAll().then((result) => {  
  50.                         if (result) {  
  51.                             Submit(data).then(res => {  
  52.                                 if (res) this.close()  
  53.                             })  
  54.                         }  
  55.                     });  
  56.                 })  
  57.             }  
  58.         },  
  59.     }  
  60. }  
  61. </script>  

 

再来一遍

 

 

[javascript] view plain copy

  1. import dialog from './dialog.vue'  
  2.   
  3. function install(Vue) {  
  4.     Object.defineProperty(Vue.prototype, '$dialog', {  
  5.         get() {  
  6.             let div = document.createElement('div');  
  7.             document.body.appendChild(div);  
  8.             return (message, modalBody) => {  
  9.                 const Constructor = Vue.extend(dialog)  
  10.                 const Instance = new Constructor({  
  11.                     data() {  
  12.                         return {  
  13.                             message: message,  
  14.                             show: true,  
  15.                             modalBody: modalBody  
  16.                         }  
  17.                     }  
  18.                 }).$mount(div)  
  19.                 return Instance.setSubmit  //放回 一个方法用于 传递 自定义的数据和 submit 时方法  
  20.             };  
  21.               
  22.         }  
  23.     });  
  24. }  
  25.   
  26. export default install  

Vue.use 同上

[javascript] view plain copy

  1. this.$dialog('请计算下面的数学题', resolve =>   
  2.                 require(['./oneaddone.vue'], resolve))('input', (data) => {  
  3.         this.$alert('哈哈哈,正确')  
  4.                     console.log(data)  
  5.                     return data  
  6.                 }  
  7.             )  


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

 

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

欢迎加群交流:897724635  更多视频教程资源分享给大家

Logo

前往低代码交流专区

更多推荐