vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問題

更新時間：2023年05月22日 17:19:57 作者：猴子都會我不會

這篇文章主要介紹了vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue彈窗組件的使用以及彈窗只能觸發(fā)一次

1.父組件引入并注冊子組件

import BusinessDialog from '../../components/BusinessDialog'
export default {
? components: {
? ? BusinessDialog
? },
? data() {
? ? return {
? ? ? dialog:false;
? ? };
? },

2.在父組件中使用子組件

?<business-dialog :dialog.sync="dialog"></business-dialog>
?//這里的dialog就是要傳遞給子組件的值,默認是false(不彈出)

3.事件觸發(fā)改變dialog的值

openDialog() {
? ? ? this.dialog = true
? ? },
? ? //在父組件中點擊編輯按鈕,觸發(fā)彈窗

以下是子組件的操作

export default {
//子組件通過props接收父組件傳遞過來的值 dialog控制彈窗的彈出及隱藏
? props: {
? ? dialog: {
? ? ? type: Boolean,
? ? ? default: false,
? ? },
? },
? data() {
? ? return {
? ? };
? },
? methods: {
? ? checkDate(val) {},
? ? //解決彈窗只能彈一次的問題(點擊確定和取消按鈕的時候,給dialog做一個重新賦值)
? ? confirm() {
? ? ? this.$emit("update:dialog", false);
? ? },
? ? cancle() {
? ? ? this.$emit("update:dialog", false);
? ? },
?? ?//子組件傳值給父組件(onChange是傳遞給父組件的事件名, true是傳遞給父組件的值)
?? ?this.$emit('onChange',true)
? },
};

父組件怎么接收子組件傳的值呢?

<business-dialog :dialog.sync="dialog" @onChange="getData"></business-dialog>
methods:{
getData(val) {
?? ?//這個val就是接收到的子組件傳遞過來的值啦~~~~
?? ?}
}

關于彈窗組件的優(yōu)化處理

在之前的項目中，發(fā)現(xiàn)很多頁面中有很多選擇各種數(shù)據(jù)的彈窗,如下：

一般來說，在vue的項目中寫成一個子組件，在父組件中引用即可。

問題在于

1.在父組件中要定義變量，什么時候展示該子組件
2.父子組件中的通信，父組件要定義方法傳給子組件調(diào)用
3.大量的父組件需要用到這個組件時，難免要重復上面的操作

于是，我想出一種思路，可不可以在父組件中通過調(diào)用方法的方式調(diào)用這個子組件，不需要在父組件中定義變量定義方法，省去一部分代碼，如下：

this.alertWbs();   // 打開上面的彈窗

具體思路如下

當調(diào)用這個方法的時候采用Vue.extend動態(tài)構建一個組件，具體代碼如下：

import Vue from 'vue';
import wbs from './wbs';                // 子組件
const Wbs = Vue.extend(wbs);
var instance = null;                     // 這里做一個處理，只需要一個實例
export function alertWbs(){
    if(!instance){
        instance = new Wbs();
        instance.$mount();
        document.body.appendChild(instance.$el);
    }
    instance.projectAreaDialog = true;      // 控制子組件自己的顯示
}

這樣以后，調(diào)用alertWbs方法以后，子組件會顯示出來。

那么還存在另外一個問題，當子組件中選擇完了數(shù)據(jù)以后如何告知父組件

思路：在點擊子組件按鈕的時候，通知父組件，我已經(jīng)選好數(shù)據(jù)了。

如何通知？

第一時間想到的是Promise，利用Promise的機制，當我點擊了子組件的按鈕時將數(shù)據(jù)通過resolve的方式推送給父組件，那么父組件里面的方法就可以寫成這樣

this.alertWbs().then(res=>{
  console.log(res);    // 此時傳過來的res應該就是子組件中選擇的數(shù)據(jù)了
})

那么，改造一下子組件，讓子組件返回一個Promise對象

import Vue from 'vue';
import wbs from './wbs';
const Wbs = Vue.extend(wbs);
var instance = null;
export function alertWbs(){
    if(!instance){
        instance = new Wbs();
        instance.$mount();
        document.body.appendChild(instance.$el);
    }
    instance.projectAreaDialog = true;
    return new Promise((resolve,reject)=>{
        instance.promise = {       //  將promise掛載到子組件實例上，因為目前為止，誰也不知道什么時候resolve數(shù)據(jù)
            resolve,reject
        }
    })
}

在wbs.vue文件中

choose(value){
   this.promise.resolve(value);            //  向父組件傳值
   this.projectAreaDialog = false;       // 改變自己的狀態(tài)，隱藏
}

大功告成！??！

進一步優(yōu)化，父組件如何傳值給子組件呢？

在一個方法中，最容易想到的肯定是方法的參數(shù)，改變一下父組件調(diào)用的方法

this.alertWbs(params).then(res=>{
  console.log(res);    // 此時傳過來的res應該就是子組件中選擇的數(shù)據(jù)了
})

子組件接受值

import Vue from 'vue';
import wbs from './wbs';
const Wbs = Vue.extend(wbs);
var instance = null;
export function alertWbs(params){
    if(!instance){
        instance = new Wbs();
        instance.$mount();
        document.body.appendChild(instance.$el);
    }
    instance.projectAreaDialog = true;
    instance.params = params;   // 直接放在子組件的實例上
    return new Promise((resolve,reject)=>{
        instance.promise = {       //  將promise掛載到子組件實例上，因為目前為止，誰也不知道什么時候resolve數(shù)據(jù)
            resolve,reject
        }
    })
}

當然為了讓子組件更加靈活，可以內(nèi)置一個鉤子函數(shù)，當子組件顯示的時候自動調(diào)用，我這里用的是init方法，完整的代碼如下：

import Vue from 'vue';
import wbs from './wbs';
const Wbs = Vue.extend(wbs);
var instance = null;
export function alertWbs(){
    if(!instance){
        instance = new Wbs();
        instance.$mount();
        document.body.appendChild(instance.$el);
    }
    instance.projectAreaDialog = true;
    // init方法獲取頁面數(shù)據(jù)
    instance.init();
    return new Promise((resolve,reject)=>{
        instance.promise = {
            resolve,reject
        }
    })
}

init方法其實就是wbs.vue中的普通方法，需要定義

以上調(diào)用方法使用到的this，是由于該方法掛載在vue的原型對象上，不需要在每個組件中引用