【Vue 父子组件通信】

data 中数据相互调用

需要用到 data 中数据，只需在 mounted 中引用

父子组件传值

1. 封装子组件

   <!-- 领域对比 -->
   <div v-show="viewName == 'domain'">
       <DomainCompare
       ref="domainCompare"
       @callCompleteLoadData="completeDomainData"
       :eldShow="eldShow"
       :iepShow="iepShow"
       :centerId="centerId"
       :groupId="groupId"
       :periodAlias="periodName"
       :frameworkId="frameworkId">
       </DomainCompare>
   </div>

2. 引用子组件

	<script>
		import MeasureCompare from './measureCompare.vue'
		import DomainCompare from './domainCompare.vue'
		import xlsx from '@/assets/img/file/xlsx.png'
		export default {
		    name: 'assessmentCompare',
		    components: {
		        MeasureCompare,
		        DomainCompare
		    },
		    data () {
		    ...

3. 子组件在 props 中定义

	<script>
		export default {
		    name: 'domainCompare',
		    props: {
		        eldShow: Boolean,
		        iepShow: Boolean,
		        centerId: String,
		        groupId: String,
		        periodAlias: String,
		        frameworkId: String,
		    },    
		    data () {
		    ...

props 传值
$ref 父组件调用子组件中方法

   this.$nextTick(function(){
       this.$refs.domainCompare.getDomainCompareData();
   })

this.$nextTick 避免对应内容获取时还未创建

$emit 子组件向父组件传递事件

	// 子组件中传值
	...
   if (this.domianCompareData && Object.keys(this.domianCompareData).length > 0) {
       this.$emit('callCompleteLoadData', 1)
   }
   ...

	// 父组件中处理
	...
	    methods: {
        completeDomainData (count) {
            this.domainHasData = count > 0
        },
	...