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