vue中props数据变化的问题 |
您所在的位置：网站首页 › vue子组件props接收的值 › vue中props数据变化的问题 |
vue中props数据变化的问题
|
发现问题
在vue项目中，父子组件数据传递是最常见的场景，但是今天在开发过程中父级数据传递到子组件，控制子组件的显隐，发现存在问题，一直监听不到数据的变化，详细排查后发现是因为props在传递数据的时候子组件接收到数据后没有及时发生变化导致的。 这里使用的是 iview 框架 // 子组件 Content of dialog Content of dialog Content of dialog export default { name: 'TestModel', props: { showModel: { type: Boolean, default: false } }, data() { return { isShowModel: this.showModel } } } // 父组件 显示弹窗 import TestModel from './components/TestModel.vue' export default { components: { TestModel }, data() { return { showModel: false, } }, methods: { changeShowModel() { this.showModel = true; } } } 问题分析预期效果是点击按钮直接弹出弹窗，结果怎么也弹不出来。子组件中增加 watch 监听 props 发现数据已经变化了，但是 data 中接收 props 数据的变量并未改变，发现问题所在。 问题原因就是接收 props 数据的变量无法及时响应 props 的变化，下一步解决问题就是重点解决响应变化问题。 问题解决 解决方案1子组件中增加 watch 监听 props 中传进来的数据变化，同时当子组件数据变化时，数据上传父组件。 // 子组件 Content of dialog Content of dialog Content of dialog export default { name: 'TestModel', props: { showModel: { type: Boolean, default: false } }, data() { return { isShowModel: this.showModel } }, watch: { showModel(v) { this.isShowModel = this.showModel } }, methods: { cancel() { this.$emit('cancel', this.isShowModel); } } } // 父组件 methods: { modelCancel(v) { this.showModel = v; } } 解决方案2使用 vue 中的计算属性( computed )中的 set 方法。 // 子组件 Content of dialog Content of dialog Content of dialog export default { name: 'TestModel', props: { showModel: { type: Boolean, default: false } }, computed: { isShowModel: { set(v) { this.$emit('cancel', v); }, get() { return this.showModel; } } }, }有兴趣的兄弟可以关注我的博客 www.maple.ink |
【本文地址】