【Vue原理】Props - 白话版

专注 Vue 源码分享，为了方便大家理解，分为了白话版和 源码版，白话版可以轻松理解工作原理和设计思想，源码版可以更清楚内部操作和 Vue的美，喜欢我就关注我的公众号，公众号的文章，排版更好看

如果你觉得排版难看，请点击下面公众号链接

【Vue原理】Props - 白话版

今天我们用白话文解读props 的工作原理

props 真的挺有用的，作为父传子的载体，大家肯定都用过，但是你有没有想过，Props 到底是怎么工作的？

希望先看下 响应式原理，对 props 理解很有帮助

响应式原理

开篇之前，我提出三个问题

1、父组件 怎么传值给 子组件的 props

2、子组件如何读取props

3、父组件 data 更新，子组件的props 如何更新

今天我们带着三个问题去开始我们的讲解

明白这三个问题，那么相信你也就理解了 props 的工作原理

场景设置

现在我们有一个这样的 根组件 A 和 他的 子组件 testb

根组件A 会 把 parentName 传给 子组件 testb 的 props

根组件A 也是 组件testb 的 父组件

<div class="a" >
    <testb :child-name="parentName" ></testb>
</div>

new Vue({
       
    el:".a",        
    name:"A",    
    components:{
           
        testb:{
               
            props:{
                   
                childName:""
            },            
        template: '<p>父组件传入的 props 的值 {
   {childName}}</p>',