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();//显示数据的方法
      }
    }
原文地址:https://www.cnblogs.com/home-/p/11761082.html