组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的

传递数据的解决方案就是props

父级：

在父级中引入子集

<template>
    <h3>Parent</h3>
    <Child/>
</template>

<script>
import Child from "./Child.vue"
export default {
    data() {
        return{
            
        }
    },
    components:{
        Child
    }
}
</script>

而父级在App里引入

<template>
 
  <Parent/>
  
</template>

<script>

import Parent from "./components/Parent.vue"

export default {
  components:{
    
   Parent
  }
}
</script>

<style>

</style>

父级将数据传送给子集，在父级中<Child title="Parent数据"/>写出如下代码

而在子级组件中，如下编写

<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
    <!-- 用模板语法的方式让其显示 -->
</template>

<script>
export default {
    data() {
        return{
            
        }
    },
    props:["title"]//在这里以字符串形式存在
}
</script>

 成功传入

当然也可以传递多个数据，且传递的数量没有限制

父级中

子集中

<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
    <p>{{ demo }}</p>
    <!-- 用模板语法的方式让其显示 -->
</template>

<script>
export default {
    data() {
        return{
            
        }
    },
    props:["title","demo"]//在这里以字符串形式存在
}
</script>

动态数据传递

通过下面代码就可以实现动态数据传递

<template>
    <h3>Parent</h3>
    <Child :title=" message" />
    <!-- v-bind把后面变成动态的数据 -->
</template>

<script>
import Child from "./Child.vue"
export default {
    data() {
        return{
            message:"Parent数据!"
        }
    },
    components:{
        Child
    }
}
</script>

成功

注意事项：

proos传递数据只能从父级传递到子集，不能反其道而行