首页 > 其他 > 详细

VUE 子组件向父组件传值 , 并且触发父组件方法(函数)

时间:2020-06-02 14:30:47      阅读:356      评论:0      收藏:0      [点我收藏+]

目标:封装一个  搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数>

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)
         },
}

 

VUE 子组件向父组件传值 , 并且触发父组件方法(函数)

原文:https://www.cnblogs.com/ddgm/p/13030825.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!