//下面的方式就是自定義元件或方法的方式

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

最後vue.use 一下

[javascript] view plain copy

1. import alert from 'index'  
2. 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. function install(Vue) {  
3.     Object.defineProperty(Vue.prototype, '$confirm', {  
4.         get() {  
5.             let div = document.createElement('div')  
6.             document.body.appendChild(div);  
7.             return (message, confirmSure) => {  
8.                 const Constructor = Vue.extend(Confirm)  
9.                 const Instance = new Constructor({  
10.                     data() {  
11.                         return {  
12.                             message: message,  
13.                             show: true  
14.                         }  
15.                     },  
16.                     methods: {  
17.                         confirmSure: confirmSure    //確定方法  
18.                     }  
19.                 }).$mount(div);  
20.             };  
21.         }  
22.     });  
23. }  
24. 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.                 value: null  
7.             }  
8.         }  
9.     }  
10. }  

用到了前端驗證 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. <script>  
33. export default {  
34.     name: 'dialog',  
35.     data() {  
36.         return {  
37.             Submit: () => {}  
38.         }  
39.     },  
40.     methods: {  
41.         close() {  
42.             this.show = false  
43.         },  
44.         setSubmit(dataKey, Submit) {  
45.             this.submit = () => {   //給submit btn 設定提交方法  
46.                 this.$children.map(function (child) {  
47.                     let data = child.$data[dataKey] //data 的key 呼叫時傳遞的 data key 可以根據情景定義  
48.                     child.$validator.validateAll().then((result) => {  
49.                         if (result) {  
50.                             Submit(data).then(res => {  
51.                                 if (res) this.close()  
52.                             })  
53.                         }  
54.                     });  
55.                 })  
56.             }  
57.         },  
58.     }  
59. }  
60. </script>  

再來一遍

[javascript] view plain copy

1. import dialog from './dialog.vue'  
2. function install(Vue) {  
3.     Object.defineProperty(Vue.prototype, '$dialog', {  
4.         get() {  
5.             let div = document.createElement('div');  
6.             document.body.appendChild(div);  
7.             return (message, modalBody) => {  
8.                 const Constructor = Vue.extend(dialog)  
9.                 const Instance = new Constructor({  
10.                     data() {  
11.                         return {  
12.                             message: message,  
13.                             show: true,  
14.                             modalBody: modalBody  
15.                         }  
16.                     }  
17.                 }).$mount(div)  
18.                 return Instance.setSubmit  //放回 一個方法用於 傳遞 自定義的資料和 submit 時方法  
19.             };  
20.         }  
21.     });  
22. }  
23. 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  更多視訊教程資源分享給大家