VUE 子组件向父组件传值 , 并且触发父组件方法(函数)
目标:封装一个 搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数>
1.子组件
1 <div> 2 <input v-model="listQuery.keyword"> 3 <span>筛选搜索</span> 4 <el-button @click="search" >查询搜索</el-button> 5 </div>
methods: { search(){ //this.$emit('父组件名称',传到父组件的参数); this.$emit('searchListZ', this.listQuery); this.$parent.getList();//执行父组件函数 } }
2.父组件
//这里的名称要和子组件里的名称一致this.$emit('searchListZ', this.listQuery);
<jTable v-on:searchListZ="searchListZ"></jTable>
methods: { searchListZ(form) { //form参数是子组件传过来的,把他赋值到搜索条件上就行 this.searchForm= {...form}; //searchForm为父组件里的属性
console.log(form)
},
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步