zoukankan      html  css  js  c++  java
  • 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)
             },
    }
  • 相关阅读:
    AWVS——windows下扫描(上)
    中介者模式
    设计模式-类型2
    设计模式=类型
    C++ 1
    字符占字节
    编程规范
    位运算相关规律
    十进制转二进制
    递归理解
  • 原文地址:https://www.cnblogs.com/ddgm/p/13030825.html
Copyright © 2011-2022 走看看