组件传值

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>

猜你喜欢

转载自blog.csdn.net/weixin_39150852/article/details/88345452