使用vue.use(##)构建全局方法，用this.$##使用，同时给自定义的方法 传递component调用其方法 //eventHub

 

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

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. "data" v-if="show">  

换个办法以自定义alert 为例

 

 

 

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

alert.vue 如下

[javascript] view plain copy

1.   
2.   

 

对然后将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.   
2.   

 

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

  

           

  

       

  

   

  

[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.   
2.   
3.   

 

再来一遍

 

 

[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  更多视频教程资源分享给大家