vue页面父组件与子组件相互调用方法和传递参数值

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);},