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