阅读 89

父子prop问答

本文适合具有一定的prop使用经验的开发者进行食用。 

  当我们在使用vue框架进行开发应用的时候,经常需要进行父子组件之间的通信,同时在vue框架中,也提供了prop这样的一种方式,但我们经常会对一些比较细节的问题搞懵逼。那么接下来,我们将对prop进行一个深层次的问答。

  • 问题一:vue的组件在什么情况下会更新?又会在什么时候更新?

答:我们大家都知道vue实例的生命周期,当一个组件被初始化后,会依次的执行created->mounted生命周期函数,但是呢?并不会执行updated生命周期函数。

只有当vue组件的template渲染模板所依赖的data值发生了改变,这个时候才会去执行updated生命周期函数,并进行组件dom的更新。

  • 问题二:vue通过prop传值(非对象值)给子组件,父组件改变了prop,子组件中的prop也会变吗?

       答:父元素改变prop值后,如果子组件的template依赖该prop的值,那么子元素执行updated函数,同时也会进行dom的更新,同理父组件也会执行updated函数,然后进行dom的更新,然而子组件的updated会在父组件的updated函数之前执行

       如果子组件的template并不依赖该prop的值,那么该值会发生变化,但是不会执行子元素的updated方法,同时也不会重新渲染dom

  • 问题三:vue通过prop传值(非对象值)给子组件,子组件改变了prop值,父组件也会变吗?

      答:改变父传子的prop后:子的值会被修改,同时会执行子的updated方法,但不会执行父元素的updated方法,同时浏览器会报一个警告的错误,提醒用户”避免直接更改prop,因为每当父组件重新渲染时,该值都会被覆盖。取而代之的是,根据prop的值使用数据或计算属性。“

  • 问题四:vue通过prop传值(对象值)给子组件,子组件改变了prop值,父组件也会变吗?

      答:子组件改变prop值后,如果子组件的template依赖该prop值,则执行updated函数,同时也会进行dom的更新,同理父组件也会执行updated函数,然后进行dom的更新,然而子组件的updated也会在父组件的updated函数之前执行

  • 问题五:prop的值不被子组件template所依赖,如果改变了父组件中prop值,子组件中的prop值还会被更新吗?

      答:子元素中的值依然会被更新

总结

  1. 只有父组件的prop更新了,那么子组件的prop也一定会被更新;

  2. 如果prop是非对象值,那当子组件改变该值后,子组件中会修改,但父组件不会被修改,同时vue会抛出一条警告提醒;

  3. 如果prop是对象值,那当子组件改变该值后,子组件中会修改,父组件中也会被修改;

  4. 当prop值被改变后,只有在template依赖该prop值时,组件才会进行dom的更新并触发updated生命周期函数。

文章分类
前端
文章标签