每一个vue文件都是一个组件,可以在其他vue页面进行调用
1.导入组件:
import agreementApplyElec from './agreement-apply-elec.vue';
2.使用组件:
<!-- 生成电子协议 -->
<agreement-apply-elec
id="agreement-apply-elec"
v-if="dialogVisible" //是否显示本组件
ref="agreementApplyElec" //代表本组件的一个变量名
@refresh="getDataList"> //组件页面可以通过@refresh方法来调用引用本组件页面的getDataList方法
</agreement-apply-elec>
3.父组件向子组件传值:
// $refs.使用组件时的ref.子组件的属性
this.$refs.agreementApplyElec.tableData = res.data;
// 父组件传两个一样的值给子组件时,需要用JSON进行转化,不然对子组件来说改变
// tableDate,fitstTableData 也会跟着改变
this.$refs.agreementApplyElec.fitstTableData = JSON.parse(JSON.stringify(res.data)) ;
4.子组件调用父组件的方法:
this.$emit('refresh'); //refresh是使用组件时定义的一个方法