使用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
- import coustom from './coustom'
- export default {
- components: {
- coustom
- }
- }
- <coustom :data="data" v-if="show"></coustom>
換個辦法以自定義alert 為例
就這麼一句就調用出來
this.$alert('哈哈哈');
alert.vue 如下
[javascript] view plain copy
- <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
[javascript] view plain copy
- 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 一下
[javascript] view plain copy
- import alert from 'index'
- Vue.use(alert)
就能直接呼叫了
當然前面有個坑 transition 的 vue 的過渡 alert的div不是一開始就載入到文件上的,通過後面的
[javascript] view plain copy
- 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
- <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>
[javascript] view plain copy
- 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)
[javascript] view plain copy
- this.$confirm('你是猴子請來的唐僧麼', () => console.log('yes,哈哈哈哈哈'))
傳了兩個arguments,累了吧,輕鬆點,
片分三級,嗯········引數也得 至少能傳 三個。。。。
嗯,往哪裡看吶···!
這裡傳遞的params 才傳遞到第二個,才實現第二個功能,要麼要實現第三個功能呢,dialog對話方塊內容,根據環境應用環境傳遞進去顯示
如此中間的form 表單是動態傳遞進入的
[javascript] view plain copy
- <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>
[javascript] view plain copy
- export default {
- name: 'oneaddone',
- data() {
- return {
- input: {
- value: null
- }
- }
- }
- }
用到了前端驗證 vue veevalidate 這樣傳遞進去 要調教資料時,觸發驗證,就是父元件呼叫子元件的方法
this.$children 即可
dialog.vue
[javascript] view plain copy
- <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>
再來一遍
[javascript] view plain copy
- 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 同上
[javascript] view plain copy
- 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 答案正確········
歡迎加群交流:897724635 更多視訊教程資源分享給大家