Vue公共組件( 頁面 )之間的操作

當你信仰的力量、變得越來越強烈、終有一天突破灰白的牆面、真實的感覺戰勝花哨的裝點、怎樣才叫偉大在心中彰顯
( 你突然闖進我的生活,離開后打亂了我的生活方式,生命的匯合無法說得清 )

 

 

---

一、返回按鈕返回功能:( 子傳父 -> 子傳父( 自定義事件 ) )

操作都是在父組件中操作的,子組件就是發送事件

1、首先是底部的公共模塊向使用它的父元素發送自定義事件執行返回功能

2、使用底部公共模塊的組件接收到事件后( 因為是公共組件所以不能直接執行 )需要向使用這個公共組件的父元素把剛剛接收到的自定義事件發送過去

3、使用公共組件的組件接收到子組件傳來的自定義事件后執行

 

---

 

二、提交按鈕正則驗證( 子傳父( 這個功能傳一次就可以了 ) )

正則驗證就不需要三級傳了,只在公共組件操作因為新建和編輯都要驗證所以在第一個父組件操作就行了

---

 

---

 

 

三、新建功能的實現( 這塊兒我得先想想 , 可能會表達不清楚)Do You Rember

1、我的這個新建功能有模糊搜索這一塊所以我也一塊寫了

2、觸發子子級中的提交按鈕，所以需要子父傳值執行自定義事件，子子級 -> 子級(公共頁面) -> 父級(使用公共頁面的父組件)

 

3、觸發子子級中的自定義事件完成正則與提交功能( 子子級任務完成 ) ---> 子級( 公共頁面 )接收子子級傳來的自定義事件然后觸發( 正則判斷完成 )

 

 

 

 

 

 4、向父組件( 使用公共頁面的組件 )發送自定義事件和輸入框綁定的值，因為所有的東西都在這個公共組件里了子組件負責調用父組件負責操作

　　發送過去父組件接收完成新建功能 <!-- 這個一會兒再說，先看模糊搜索 -->

 

 

 5、公共頁面中的模糊搜索功能( 因為新建和編輯都有模糊搜索所以直接寫在了公共頁面直接兩個都完成 )

　　

 

 

 

結構：綁定輸入框事件
<el-input v-model="item.coachSrearchShopValue" @input="dimSearch()"></el-input>

data中:
// 正則判斷用於校驗輸入框的值是否與數據庫匹配
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("請輸入訓練營名稱"));
      }
      setTimeout(() => {
        if (value != this.dimValue_value) {
          callback(new Error("訓練營名稱不存在"));
          this.emptyVal();
        } else {
          callback();
        }
      }, 300);
    };
return {
    coachSrearchShopValue:"",//用戶模糊搜索傳給后端
    dimSearchVal: [], //獲取所有數據
    dimValue_value: "" //獲取訓練營名稱用於判斷
}

事件： // 模糊搜索===查看接口 coachSrearchShopValue 如果有就顯示如果沒有就清空
 dimSearch() { this.dim(); },
    dim() {
      let val = this.ruleForm.formInlineList[0].coachSrearchShopValue;
      let _val = this.ruleForm.formInlineList[0];
      let req = { trainingCampLessonName: val };
      trainingcamplessonscheduleList(req).then(res => {
        this.dimSearchVal = res.data.data.rows; if (res.data.code == "200") {
          this.dimSearchVal.map(item => { this.dimValue_value = item.trainingCampLesson.name;//獲取訓練營名稱 用戶判斷
　　　　　　　 let _item = item.trainingCampLesson.gymnasium;
　　　　　　　　// 判斷輸入框是否與返回數據一致 一致就顯示不一致就清空
　　　　　　　　if (val == item.trainingCampLesson.name) {
              _val.pCode = _item.code;

　　           _val.pName = _item.name;
              _val.pAaddress = _item.address;
            } else {
              val = "";
              this.emptyVal();
            }
          });
        } else {
          return false;
        }
      });
    },
    // 用於搜索不成功后清空的函數
    emptyVal() {
      let empty_val = this.ruleForm.formInlineList[0];

　　　　// 底部對應的三個P標簽

　　     mpty_val.pCode = "";

 empty_val.pName = ""; empty_val.pAaddress = ""; }

6、完成新建功能( 在公共組件已經把事件和綁定的值發送給了父元素，接下來就是父元素接收調接口傳參等操作 )

父組件使用公共組件的組件

自定義事件名與函數名如果沖突需要去掉括號執行，不沖突加括號也可以執行