In the parent component: <! <serchObj :checkCon="multipleSelection" v-on:update="update" V-on :add="add" v-on:delete="delete1" v-on:search="search"> </serchObj> data() { return { multipleSelection: [], } } <script> handleSelectionChange(val) { console.log(val) this.multipleSelection = val; }, </script> in child components: <template> <div class="LedgerSearch"> <div class="handle"> <el-button type="primary" :class="{'disab': Disableconup}" :disabled="disableconup" @click="updateCon" icon="el-icon-edit" size="small" > Edit </el-button> <el-button type="primary" :class="{'disab': Disablecon}" :disabled="disablecon" @click="deleteCon" icon="el-icon-delete" size="small" > Delete </el-button> <el-button Type ="primary" icon="el-icon-plus" size="small" @click="addCon"> </el-button> </div> <div class="Search"> <input type="text" class="SearchInput" v-model="searchInput"> <el-button type="primary" icon="el-icon-search" size="mini" @click="seachCon" style="background-color: #1ab298" > </el-button>Copy the code<script> export default {name: "", data() {return {disablecon: true, // disable disable onup: True, // Edit disable searchInput: "", // search Title: "", // popbox Title parTable: [], // parent component value}; }, props: ["checkCon"], // handle: {checkCon: {handler(cval, oval) {this.parTable = cval; if (cval.length > 0) { this.disablecon = false; if (cval.length > 1) { this.disableconup = true; } else { this.disableconup = false; } } else { this.disablecon = true; this.disableconup = true; }}, deep: true}}, methods: $emit('update','') {seachCon() {console.log(this.searchinput); // seachCon() {console.log(this.searchinput); This.$emit('search', this.searchinput) // Add addCon() {this.$emit('add','') // add this. }, deleteCon(){this.$emit('delete', this.partable)}}, mounted() {}}; </script>Copy the code