1. 父组件
在父组件进行子组件的调用,实现点击按钮的时候再触发子组件的方法调用(点击按钮只是一个举例,只是为了举例说明在特定情况下去触发子组件调用的方法),并且实现父组件向子组件传递参数。
<template>
<div>
<div>
<el-button size="medium" type="primary" @click.native="loadHistoryList">加载历史记录列表</el-button>
</div>
<history-list :id="id" :load="isLoadHistory"></history-list>
</div>
</template>
<script>
import HistoryList from '../../components/HistoryList.vue'
export default {
data() {
return {
id: '',
isLoadHistory: 0,
}
},
methods: {
//加载历史记录列表
loadHistoryList() {
this.isLoadHistory = 1;
},
},
mounted() {
this.id = this.$route.query.id;
},
}
</script>
2. 子组件
子组件接收父组件的参数,并且监听接收的load参数变化,在load参数等于1的情况下触发列表方法的调用。
<template>
<div>
<el-table :data="historyList" stripe>
<el-table-column prop="name" label="姓名" min-width="8%"></el-table-column>
<el-table-column prop="orderNo" label="订单编号" min-width="10%"></el-table-column>
<el-table-column prop="createAt" label="创建时间" min-width="12%"></el-table-column>
...
</el-table>
</div>
</template>
<script>
import { ajax } from '../../api/api.js'
export default {
props: ['id', 'load'],
data() {
return {
historyList: [],
}
},
watch: {
load: function(newValue, oldValue) {
if (newValue == 1) {
this.getHistoryList();
};
}
},
methods: {
//历史记录列表
getHistoryList() {
let url = '/historyList.do';
let param = {
id: this.id
};
ajax(url, param).then(response => {
if (response.code == 0) {
this.historyList = response.data.rows;
} else {
this.$message({
message: response.desc,
type: 'warning'
});
};
});
},
},
mounted() {
this.id = this.$route.query.id;
},
}
</script>
注:如果父组件向子组件传递的参数为多个,可以组合成对象的形式,例如将id替换成obj即可。