【Vue原理】Props - 白话版

最新推荐文章于 2025-04-07 17:33:22 发布

原创

最新推荐文章于 2025-04-07 17:33:22 发布 · 590 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #javascript #前端 #框架 #源码

本文以白话方式解读Vue中Props的工作原理，包括父组件如何通过props传递值给子组件，子组件如何读取和响应式更新props，以及当父组件数据变化时，如何影响子组件的props。通过实例解析props的设置、赋值过程和响应式机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【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>',
        }