快捷導(dǎo)航

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

更新時(shí)間：2023年05月22日 17:19:57 作者：猴子都會(huì)我不會(huì)

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

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

1.父組件引入并注冊(cè)子組件

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

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

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

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

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

以下是子組件的操作

export default {
//子組件通過(guò)props接收父組件傳遞過(guò)來(lái)的值 dialog控制彈窗的彈出及隱藏
? props: {
? ? dialog: {
? ? ? type: Boolean,
? ? ? default: false,
? ? },
? },
? data() {
? ? return {
? ? };
? },
? methods: {
? ? checkDate(val) {},
? ? //解決彈窗只能彈一次的問(wèn)題(點(diǎn)擊確定和取消按鈕的時(shí)候,給dialog做一個(gè)重新賦值)
? ? 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) {
?? ?//這個(gè)val就是接收到的子組件傳遞過(guò)來(lái)的值啦~~~~
?? ?}
}

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

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

一般來(lái)說(shuō)，在vue的項(xiàng)目中寫成一個(gè)子組件，在父組件中引用即可。

問(wèn)題在于

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

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

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

具體思路如下

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

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

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

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

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

如何通知？

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

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

那么，改造一下子組件，讓子組件返回一個(gè)Promise對(duì)象

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掛載到子組件實(shí)例上，因?yàn)槟壳盀橹?，誰(shuí)也不知道什么時(shí)候resolve數(shù)據(jù)
            resolve,reject
        }
    })
}

在wbs.vue文件中

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

大功告成?。?！

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

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

this.alertWbs(params).then(res=>{
  console.log(res);    // 此時(shí)傳過(guò)來(lái)的res應(yīng)該就是子組件中選擇的數(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;   // 直接放在子組件的實(shí)例上
    return new Promise((resolve,reject)=>{
        instance.promise = {       //  將promise掛載到子組件實(shí)例上，因?yàn)槟壳盀橹?，誰(shuí)也不知道什么時(shí)候resolve數(shù)據(jù)
            resolve,reject
        }
    })
}

當(dāng)然為了讓子組件更加靈活，可以內(nèi)置一個(gè)鉤子函數(shù)，當(dāng)子組件顯示的時(shí)候自動(dòng)調(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方法獲取頁(yè)面數(shù)據(jù)
    instance.init();
    return new Promise((resolve,reject)=>{
        instance.promise = {
            resolve,reject
        }
    })
}

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

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