vue父组件与子组件之间的传值 props

• 一般情况下，一个组件可以拆分为多个子组件，按照导师的话理解就是，在开发的时候首先应该页面板块或者功能类似的模块进行组件细化，先有小的组件，后才有大的组件，如果不能一开始定义好细小的组件，越写带后边，就会出问题，而且问题会很多（页面代码冗余、页面不够精简、页面结构不清晰混乱），所以组件的细化在vue的开发中显得尤为重要。

父组件

• 1、引入子组件并进行注册

	import ConditionQuery from '@/views/financial/settlement-data-query/ConditionQuery';
	import FileQuery from '@/views/financial/settlement-data-query/FileQuery';
	import ChannelRange from '@/views/financial/settlement-data-query/ChannelRange';
	import PushBizRange from '@/views/financial/settlement-data-query/PushBizRange';
	import CountryRange from '@/views/financial/settlement-data-query/CountryRange';
	export default {
   
	    components: {
   
	        ConditionQuery,
	        FileQuery,
	        ChannelRange,
	        PushBizRange,
	        CountryRange
	    }
    }

• 在页面上使用组件

	<condition-query
         v-if="formData.type === 1"
         :tracks.sync="formData.searchData.tracks"
         :albums.sync="formData.searchData.albums"
         :artists.sync="formData.searchData.artists"
         :cp-orgs.sync="formData.searchData.cpOrgs"
         :labels.sync="formData.searchData.labels"
         :is-can-edit="isCanEdit"
    />
   <file-query 
   		v-if="formData.type === 2" 
   		:is-can-edit="isCanEdit" 
   		:file-data.sync="formData.fileData"