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();//显示数据的方法

      }

    }