VUE 子組件向父組件傳值 , 並且觸發父組件方法(函數)

目標:封裝一個  搜索組件 <子組件需要傳一個或者多個搜索參數到父組件,然后父組件執行列表查詢函數>

1.子組件

 　　　<div>
　　　　　<input v-model="listQuery.keyword">
         <span>篩選搜索</span>
        <el-button @click="search" >查詢搜索</el-button>
      </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)
　　　　　　　　 },
      }