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')
},