vue页面父组件与子组件相互调用方法和传递参数值
父组件页面定义
<el-button type="text" icon="el-icon-refresh" @click="refreshClick" slot="label"></el-button>
<leftList @leftClick="loadModelClick" ref="leftControl" :parentParam="currentParam"></leftList>
父组件调用子组件leftList页面中方法refreshList()
子组件取名叫ref=“leftControl”
refreshClick(){//this.$message('refresh list');this.$refs.leftControl.refreshList();},
loadModelClick(row) {this.$Message("子调父页面的方法");
}
子组件页面定义
页面定义parentParam参数
props:['parentParam'],
<avue-crud ref="crud" :option="option" :data="tableData" :page.sync="page" v-loading="loading"@row-click="rowClick">
子组件调用父组件的loadModelClick()方法
@leftClick=“loadModelClick”
子方法rowClick方法中调用父组件中leftClick事件对应的loadModelClick方法
采用this.$emit方法调用
rowClick(row, event, column) {this.$message(this.parentParam); //父传递给子组件的属性参数值//提交row数据回调给父组件中loadModelClick方法this.$emit("leftClick", row);},