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

传递数据的解决方案就是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传递数据只能从父级传递到子集，不能反其道而行