标签：city vue 传递 改变 props 组件 监听

应用场景
在vue中父子组件是通过props传递数据的。通常有以下几种场景：

子组件展示父组件传递过来的props，一般是字符串
子组件接受父组件传递过来的props，作为本地数据使用
子组件接受父组件的传递过来的props，进行转换后展示（计算得到某个值）
子组件修改父组件传递过来的props

子组件展示父组件传递过来的props
【1】传递的prop是基础类型的值，父组件改变data，子组件随之改变
parent.vue

复制代码
child.vue

复制代码
【2】传递的数据类型是引用类型，父组件改变data，子组件随之改变
parent.vue

复制代码
child.vue

复制代码
子组件接受父组件的props作为本地数据使用

定义一个本地的data属性，将这个prop作为初始值

【1】传递的prop是基础类型的值，父组件改变data，子组件不改变
parent.vue

复制代码
child.vue

复制代码
【2】传递的数据类型是引用类型，父组件改变data，子组件随之改变
parent.vue

复制代码
child.vue

复制代码
子组件接受父组件的props进行转换后展示

用这个prop的值定义一个计算属性

【1】传递的prop是基础类型的值，父组件改变data，子组件随之改变
parent.vue

复制代码
child.vue

复制代码
【2】传递的数据类型是引用类型，父组件改变data，子组件随之改变
parent.vue

复制代码
child.vue

复制代码
子组件修改父组件传递过来的props
【1】传递的数据类型是基础类型，子组件修改父组件传递过来的props,报错。
【2】传递的数据类型是引用类型，子组件将父组件传递过来的props作为本地数据，子组件修改父组件传递过来的props,父组件也会随之改变。
总结：
【1】子组件接受父组件传递过来的props仅作为展示时：无论什么数据类型，父组件改变，子组件随之改变。
对于这个场景，子组件只是展示，子组件随父组件变化是符合场景需求的
【2】子组件接受父组件传递过来的props作为本地数据时：prop为基础类型的值，父组件改变，子组件不变；prop为引用类型的值，父组件改变，子组件随之改变。
对于这个场景，子组件是在父组件的数据基础上进行加工，父组件数据改变，子组件是希望同步响应的，解决的方法：使用watch来监听prop。产生这个问题的原因是，因为生命周期的关系，组件的data属性，在reated,只在初始化的时候赋值了一次。
【3】子组件接受父组件传递过来的props作为计算属性时：无论什么数据类型，父组件改变，子组件随之改变。
【4】子组件修改父组件，基础类型的值报错；引用类型的值父组件也改变
参考链接：

www.jianshu.com/p/ff708a773…

作者：苯宝宝
链接：https://juejin.cn/post/6873053158173179918
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

再总结 props应用类型的 子修改 父一起修改
看场景 如果需要数据隔离，进入给子的时候deepclone下，隔离的数据要修改后给父，emit update，emit自定义方法通知父类接受修改的数据，
数据隔离的场景还是复杂了操作。能避免尽量避免

标签：city,vue,传递,改变,props,组件,监听
来源： https://www.cnblogs.com/ellafive/p/16205326.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。