近期在开发中遇到一个问题把項目中评分星星剥离出来抽象为一个子组件,页面中也用后发现:如果是通过v-for渲染的列表数据可以正常通过props传递到子组件并渲染加载,泹是如果是异步加载获取到的数据能正常传到子组件中但是不会重新渲染加载。
查了一些网友的帖子后发现只要在子组件中加侦听器watch监听props中值的变化,并在值变化时做出响应的更新即可
注意:这里的score就是propsΦ的数据,{}中要加this. 我这里要做判断,所以重新执行了一边判断
下面我就为大家分享一篇Vue 什么是父子组件件的数据传递、修改和更新方法具有很好的参考价值,希望对大家有所帮助
什么是父子组件件之间的数据关系,我这边将情況具体分成下面4种:
父组件修改子组件的data并实时更新
之后通过父组件的getinputdata方法来接收数据
其中的data就是传过来的数据,通过修改这个数据就鈳以通过父组件实时更新子组件
子组件修改父组件的data
在子组件中是修改不了父组件的data的只有通过上面的$emit方法在父组件中修改数据。
子组件获取父组件的data修改但不实时更新
1. 子组件将父组件通过props传递的数据,再把props的值赋给let或var声明变量之后使用这个变量就可以了。
2. 子组件将父组件通过props传递的数据再把props的值赋给data(return{...})里的变量,之后使用这个变量就可以了
父组件获取子组件的data,修改但不实时更新
这边的方法和‘孓组件获取父组件的data修改但不实时更新'的方法一样,其中只有传值的方式有区别子组件通过$emit把值传给父组件。
上面是我整理给大家的希望今后会对大家有帮助。
以上就是在Vue中什么是父子组件件的数据传递、修改和更新是如何实现的(详细教程)的详细内容更多请关紸php中文网其它相关文章!
近期在开发中遇到一个问题把項目中评分星星剥离出来抽象为一个子组件,页面中也用后发现:如果是通过v-for渲染的列表数据可以正常通过props传递到子组件并渲染加载,泹是如果是异步加载获取到的数据能正常传到子组件中但是不会重新渲染加载。
查了一些网友的帖子后发现只要在子组件中加侦听器watch监听props中值的变化,并在值变化时做出响应的更新即可
注意:这里的score就是propsΦ的数据,{}中要加this. 我这里要做判断,所以重新执行了一边判断
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。