父子组件的数据传递这块一开始就没理解透彻,然后网上各种搜,但最后还是不明晰,方法太杂了还,所以就自己总结了一下
1 先是在子组件里定义接收数据的容器(这里容器是mapData)
<template>
<div>
<!-- 打印mapData -->
{{mapData}}
</div>
</template>
<script>
export default {
name: 'Zi',
props: {
mapData: {
// 传递数据的类型 String、Number、Boolean、Array、Object、Date、Function、Symbol
type: Array,
// 数据没传过来的默认值,可以没有
default: () => ''
}
},
data() {
return {
}
}
</script>
2 在父组件里进行数据传递(这里传递的数据是passData)
<template>
<div>
<!-- 引用子组件并进行数据传递 -->
<Zi :map-data="passData" />
</div>
</template>
<script>
// 导入子组件
import Zi from './Zi.vue'
export default {
name: 'Fu',
// 注册子组件
components: {
Zi
},
data() {
return {
passData: '这是传过去的数据'
}
}
}
</script>
就这两步,步骤一定要熟悉。
1 在子组件定义存放数据的容器
2 在负组件中引用子组件,然后传递数据