• 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)
             },
    }
  • 相关阅读:
    CSS切割
    一台电脑 多个 tomcat
    CGI
    电源关系
    Monkey Test 命令使用
    html ul
    java 反射
    RTMP
    动态库
    flash 大文件上传
  • 原文地址:https://www.cnblogs.com/ddgm/p/13030825.html
Copyright © 2020-2023  润新知