Vue輸入框組件傳值問題

偶爾燃起一點熱情瞬間就被澆滅，能完全掌控 顯然它對我特別了解

它總是來的靜靜悄悄，卻一下讓我變得被動，情緒開始變得糟糕真心的笑都顯得貴重

被催眠帶我進入睡夢，我完全被它操控，它決定我的喜怒哀樂我像在跟我自己對碰

---

 

Vue輸入框組件傳值問題

子傳父、參數

來。。。開始吧

首先說一下我這個小demo，是一個搜索框的公共組件會被很多地方使用到會涉及到傳值問題( 輸入框綁定問題 )

子傳父$emit把v-model的值傳過去自定義方法執行的時候不加括號、然后父傳子把方法放在自定義事件中調用( 父組件是操作，子組件是調用與傳值 )

 

---

 

重置功能清空輸入框顯示表格所有數據

 

子組件：

結構：

<Input v-model="selectVal"/>

<Button  @click="reset()">重置</Button>

 

data中：

selectVal:""

 

事件：

// 重置功能

reset() {

　　//自定義事件后把子組件中v-model綁定的值發送給父元素通過自定義事件告知父元素

　　this.$emit("resetHandle", this.selectVal);

　　this.selectVal = "";//清空輸入框

}

---

父組件：

結構：

子組件在父組件當標簽使用並接受子組件發送的事件、事件不加括號

<advancedSearchModule @resetHandle="resetHandle"></advancedSearchModule>

 

data中：

selectVal:"" //因為操作都是在父組件中的所以父組件也會有一個綁定的值，會在下面進行子組件傳來的值之后賦值

 

事件：

// 自定義重置事件

resetHandle(val) {

　//通過參數保持雙數據綁定進行賦值使兩方的值是一樣的、父組件的selectVal === 子組件的selectVal

  this.selectVal = val;

  this.getList();//顯示數據的接口

}

 

搜索功能

子組件：
結構：
<Input v-model="selectVal"/>
<Button @click="search()">搜索</Button>

　 data中：

　 selectVal:""

 

           　 
          事件： 
          
 
          　// 搜索功能 
           
            
              search() { 
            
            
                this.$emit("searchHandle", this.selectVal); 
            
            
            } 
            
           
           父組件： 
         

 結構：

 <advancedSearchModule @searchHandle="searchHandle"></advancedSearchModule>

 

 data中：

 selectVal:""

 

  事件：

 // 自定義搜索事件

 searchHandle( val) {

    this.selectVal = val;

   if (!this.selectVal) {

        this.$message.error("請輸入查詢條件");

   } else {

         this.dim();//執行搜索的方法

    }

}

輸入框觸發功能

子組件：
結構：
<Input @input="handle()" v-model="selectVal"/>

data中：
selectVal:""

事件：

  // 輸入框觸發事件

  handle() {

    this.$emit("InputHandle", this.selectVal);

}

---

  父組件：

  結構：

  <advancedSearchModule @InputHandle="InputHandle"></advancedSearchModule>

 

  data中：

  selectVal:""

 

  事件：

  // 自定義輸入框觸發事件

    InputHandle( val) {

       this.selectVal = val;

      if (this.selectVal == "") {

        this.getList();//顯示數據的方法

      }

    }