组件嵌套-传递参数

组件嵌套

在这里插入图片描述

这里的嵌套，就相当于不同的界面组合进在外层的root界面。每个部分都是独立的。

数据传递（父→子）

理论上通过props可以传递任何类型的数据，需要注意的是，子组件可以接收父组件的值，不能父组件接收子组件的值。数据单方向传递。传递过来的数据无法修改。仅可修改当前页面data里面的值。即，传递的数据是只读的！

<template>
  <h3>Parent</h3>
  <ChildComponent title="组件传递参数" demo="传递参数2" :demo2="msg"></ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

    export default {
    data() {
        return {
            title: "父组件页面",
            msg:"传递参数3"
        };
    },
    components: { ChildComponent }
}
</script>



<style scoped>

</style>

<template>
  <h3>Child</h3>
  <p>{{ title }}</p>
  <p>{{ demo }}</p>
  <p>{{ demo2 }}</p>
</template>

<script>
    export default {
        data(){
            return{
                title:"子组件页面",
                msg:""
            }
        },
        props:["title","demo","demo2"]
    }
</script>



<style scoped>

</style>

数据传递的校验

在这里插入图片描述
可以接受一种类型，也可以接受多种类型。
当类型不匹配的时候，可能会正常显示，但是在控制台会爆出相关警告信息。

也可以通过default给添加默认值。
对于数值和字符串给定默认值的时候，可以使用default，如果是对象和数组，需要通过工厂函数来返回。如下图。
在这里插入图片描述