VUE prop详解 学习笔记

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了，该值就是父组件的值。这只是它的工作流程，后续我们会详解。