vue组件的创建及使用

每一个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是使用组件时定义的一个方法