（五）嵌套组件：在组件中复用组件，父组件向子组件传值

1.什么是在组件中复用组件呢？就是一个自定义组件后，在这个大组件里面还需要用到自己已经创建好的组件。

如图所示：

2.想要达成这样的效果主要分为三步（感觉和非单文件组件中嵌套组件差不多）

        （1）分别创建两个组件

        （2）在大组件即1中的组件A中导入组件

import Card from '../components/Card';
//import Card为自定义名称  from 组件路径

        （3）注册要复用的组件

<script>

import Card from '../components/Card';
export default {
  components:{Card}
//components:{复用组件名称}
};
</script>

        （4）在外层组件即1中组件A想要组件显示的地方写入自定义组件名即可

<Card></Card>

3.组件传参

        （1）被复用组件标签中

子组件中：

 <div class="title">{{name}}</div>
 <div>{{age}}</div>

子组件中： 

        （2）props简单声明接收

 props:['name','age']

父组件中： 

        （3）复用组件组件标签传具体值

 <Card name="yy" :age="100"></Card>
//通过属性传递数值
//默认传入值的类型是String,不支持运算，所以传入数值时最好动态绑定

对数值的类型做限制

  props:{
    name:String,
    age:Number
  }

4.尽量不直接修改传递过来的参数，因为控制台会报错，虽然功能可以实现。

示例：如果需要操作age，复制到data中，再去修改data中的数据