vue实现父组件向子组件传递数据

父子组件的数据传递这块一开始就没理解透彻，然后网上各种搜，但最后还是不明晰，方法太杂了还，所以就自己总结了一下

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 在负组件中引用子组件，然后传递数据