父子组件方法调用及传参

1.子组件接收父组件数据类型

 props: {
    //数组
 	list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //函数名
	getBankList: {
	   type: Function,
	 },
	 //字符串
	 string:{
	   type:String,
	   default:()=>{
	       return ;
	   },
	 //数字
	 number:{
	   type:Number,
	   default:()=>{
	      return;
	 },
	//对象
	obj:{
		type:Object,
		default:() =>{
			return {};
		}
 	},
   //布尔类型
   boolean:{
      type:Bool,
      default:() =>{
        return {};
      }
  },

2.关于父子组件关系

（1）父组件给子组件传值时，data在父组件传，子组件用props去接收；子组件调用父组件的方法时，用$emit()；
（2）子组件方法在父组件中调用

3.父子组件实例—选择框组件

1、在当前模块的components创建子组件

2、子组件代码展示

<template>
  <div>
    <span>档案类别：</span>
    <el-select v-bind:value="value" v-on:change="$emit('change', $event)" size="small" style="width:150px; margin-right: 10px">
      <el-option v-for="e in data" :key="e.categoryCode" :label="e.categoryName" :value="e.categoryCode"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "CATEGORY",
  model:{
    prop: 'value',
    event: 'change'
  },
  props: {
    value: String,
    data: {
      type: Array,
      default: () =>{
        return []
      }
    }
  },
}
</script>
<style lang="scss" scoped>
</style>

3、父组件在html中引用子组件

<v-category class="l" v-model="categoryCode" :data="categoryData" @change="getPageInfo"></v-category>

4、父组件在js中定义子组件名

components: {
    vCategory: () => import(/*webpackChunkName: 'src/modules/当前模块名/components/category'*/ '../components/category')
  },