通常情况下我们渲染子组件时,根据业务需求会需要从父级传递数据到该子组件进行渲染。
一般情况下如果子组件是单次渲染或者该页面中该子组件只渲染一次的话,只需要将props中的数据直接赋值到data中完成渲染即可。
image.png
或者直接在组件中使用props中传递过来的值也可以,不必再赋值到data中。我这边赋值到data中主要是为了后续使用该数据方便。

但是,在实际生产过程中,我们需要在一个页面上渲染该子组件多次,这就会导致组件之间的值会出现错乱,比如A处子组件的值展示的是B处子组件的值。这时我们需要使用到vue中的computed和watch完成props中数据到子组件的及时更新。
image.png
在template渲染中,需要将对应的值修改为computed中返回的值:
image.png

具体原因后有机会补充,如有错误请指正。


charlotteeeeeee
74 声望7 粉丝