组件与组件之间不是完全独立的,而是有交集的,那就是组件与组件之间是可以传递数据的
传递数据的解决方案就是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传递数据只能从父级传递到子集,不能反其道而行