vue中如何监听props的变化 |
您所在的位置：网站首页 › vue父组件监听子组件的生命周期 › vue中如何监听props的变化 |
|
应用场景
在vue中父子组件是通过props传递数据的。通常有以下几种场景： 子组件展示父组件传递过来的props，一般是字符串 子组件接受父组件传递过来的props，作为本地数据使用 子组件接受父组件的传递过来的props，进行转换后展示（计算得到某个值） 子组件修改父组件传递过来的props 子组件展示父组件传递过来的props【1】传递的prop是基础类型的值，父组件改变data，子组件随之改变 parent.vue 这是父元素的内容 {{city}} 点我改变city import Child from './passPropChild' export default { name: 'parent', data: function () { return { city: '北京' } }, components: { child: Child }, methods: { changeCity: function () { this.city = this.city + Math.random().toFixed(2) } } } 复制代码child.vue 这是子元素的内容 {{ city}} export default { name: 'child', // eslint-disable-next-line vue/no-dupe-keys props: ['city'], data: function () { return { } }, methods: { } } 复制代码【2】传递的数据类型是引用类型，父组件改变data，子组件随之改变 parent.vue 这是父元素的内容 {{item.name}} 点我改变city import Child from './passPropChild' export default { name: 'parent', data: function () { return { cityList: [ { id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '广州' } ] } }, components: { child: Child }, methods: { changeCity: function () { this.cityList.push({ id: 4, name: '我是乱入的' }) } } } 复制代码child.vue 这是子元素的内容 {{item.name}} export default { name: 'child', // eslint-disable-next-line vue/no-dupe-keys props: ['cityList'], data: function () { return { } }, methods: { } } 复制代码 子组件接受父组件的props作为本地数据使用定义一个本地的data属性，将这个prop作为初始值 【1】传递的prop是基础类型的值，父组件改变data，子组件不改变 parent.vue 这是父元素的内容> {{city}} 点我改变city import Child from './passPropChild' export default { name: 'parent', data: function () { return { city: '北京' } }, components: { child: Child }, methods: { changeCity: function () { this.city = this.city + Math.random().toFixed(2) } } } 复制代码child.vue 这是子元素的内容 {{cityC}} export default { name: 'child', // eslint-disable-next-line vue/no-dupe-keys props: ['city'], data: function () { return { cityC: this.city } }, methods: { } } 复制代码【2】传递的数据类型是引用类型，父组件改变data，子组件随之改变 parent.vue 这是父元素的内容 {{item.name}} 点我改变city import Child from './passPropChild' export default { name: 'parent', data: function () { return { cityList: [ { id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '广州' } ] } }, components: { child: Child }, methods: { changeCity: function () { this.cityList.push({ id: 4, name: '我是乱入的' }) } } } 复制代码child.vue 这是子元素的内容 {{item.name}} export default { name: 'child', // eslint-disable-next-line vue/no-dupe-keys props: ['cityList'], data: function () { return { cityListC: this.cityList } }, methods: { } } 复制代码 子组件接受父组件的props进行转换后展示用这个prop的值定义一个计算属性 【1】传递的prop是基础类型的值，父组件改变data，子组件随之改变 parent.vue 这是父元素的内容 {{city}} 点我改变city import Child from './passPropChild' export default { name: 'parent', data: function () { return { city: '北京' } }, components: { child: Child }, methods: { changeCity: function () { this.city = this.city + Math.random().toFixed(2) } } } 复制代码child.vue 这是子元素的内容 {{cityChange}} export default { name: 'child', // eslint-disable-next-line vue/no-dupe-keys props: ['city'], data: function () { return { cityC: this.city } }, methods: { }, computed: { cityChange: function () { return this.city + '1' } } } 复制代码【2】传递的数据类型是引用类型，父组件改变data，子组件随之改变 parent.vue 这是父元素的内容 {{item.name}} 点我改变city import Child from './passPropChild' export default { name: 'parent', data: function () { return { cityList: [ { id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '广州' } ] } }, components: { child: Child }, methods: { changeCity: function () { this.cityList.push({ id: 4, name: '我是乱入的' }) } } } 复制代码child.vue 这是子元素的内容 {{item.name}} export default { name: 'child', // eslint-disable-next-line vue/no-dupe-keys props: ['cityList'], data: function () { return { } }, methods: { }, computed: { cityListC: function () { var newCityList = [] for (let i = 0; i < this.cityList.length; i++) { // eslint-disable-next-line vue/no-side-effects-in-computed-properties this.cityList[i].name = this.cityList[i].name + 1 // eslint-disable-next-line vue/no-side-effects-in-computed-properties newCityList.push(this.cityList[i]) } return newCityList } } } 复制代码 子组件修改父组件传递过来的props【1】传递的数据类型是基础类型，子组件修改父组件传递过来的props,报错。 【2】传递的数据类型是引用类型，子组件将父组件传递过来的props作为本地数据，子组件修改父组件传递过来的props,父组件也会随之改变。 总结：【1】子组件接受父组件传递过来的props仅作为展示时：无论什么数据类型，父组件改变，子组件随之改变。 对于这个场景，子组件只是展示，子组件随父组件变化是符合场景需求的 【2】子组件接受父组件传递过来的props作为本地数据时：prop为基础类型的值，父组件改变，子组件不变；prop为引用类型的值，父组件改变，子组件随之改变。 对于这个场景，子组件是在父组件的数据基础上进行加工，父组件数据改变，子组件是希望同步响应的，解决的方法：使用watch来监听prop。产生这个问题的原因是，因为生命周期的关系，组件的data属性，在reated,只在初始化的时候赋值了一次。 【3】子组件接受父组件传递过来的props作为计算属性时：无论什么数据类型，父组件改变，子组件随之改变。 【4】子组件修改父组件，基础类型的值报错；引用类型的值父组件也改变 参考链接： www.jianshu.com/p/ff708a773… |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |