10.1 通过prop向子组件传递数据
props
的概念的产生源于我们要向子组件传值。有时候,我们希望子组件能够使用到父组件的某些值(前提是不改变父组件的值),此时Vue
就为我们提供了一种方式,利用prop
。prop
是一个概念,prop
就是我们注册在props
中的值。我们来看一个实例:
props:["title","name"]
title
,name
就是一个个的prop
。
<parent-component>
<child-component :title="mytitle"></child-component>
</parent-component>
<script>
Vue.component("parent-component",{
data(){
return {
mytitle:"A little prence"
}
},
components:{
"child-component":{
data(){
return {
}
},
props:["title"],
template:"<span>{
{title}}</span>"
}
},
template:"<div></div>"
})
</script>
从上面我们可以看到,两个组件呈现父子关系,子组件在内部注册了一个名为title
的prop
,然后父组件将自己的mytitle
的值传给子组件,然后子组件就可以直接使用title
了,该值就是父组件的值。这只是它的工作流程,后续我们会详解。