props
可以是数组或对象,用于接收来自父组件的数据
自上而下的数据传递,即父 => 子 => 孙,只能逐级传递
props使用方法:
在父组件中导入子组件
import TableThead from '../components/TableThead'
components:{
TableThead
}
}
在父组件中使用子组件
//tbHeadArr是当前父组件的数据,欲传给子组件TableThead
//tbHead:变量名
<TableThead :tbHead="tbHeadArr">
<th slot="tbHeadOper">操作</th>
</TableThead>
在子组件中通过props得到tbHead得值,并声明类型
<script>
export default {
name: "TableThead",
props:{
tbHead:{
type:Array,
default:[]
}
}
}
</script>
在页面中就可以直接使用变量tbHead了
<template>
<thead>
<tr>
<th v-for="item in tbHead">{{item}}</th>
<slot name="tbHeadOper"></slot>
</tr>
</thead>
</template>