vue 父组件通过 props 传值给子组件，如何初始化子组件呢

› Vue.js

This topic created in 2971 days ago, the information mentioned may be changed or developed.

我通过 props 传递数据给子组件初始化数据，但是因为子组件包含输入框等修改父组件传过来的内容，所以为了不直接修改父组件传递的 props，我需要对数据进行深克隆处理，那么我这个处理应该放在哪里呢？放在 monuted,beforeMonut 之类的生命周期，在父组件修改数据的时候不会重新执行。

我的思路就是给子组件绑定一个 key 值，key 值就是传递的 props 的 json.stringify 处理后的字符串，那么数据一改就会重新渲染。不知道这种方法是否是合适的方法？

一般大家是怎么处理的呢

10 replies • 2018-03-30 12:41:42 +08:00

ghostgril

Mar 30, 2018

直接通过 props 传递数据是否是一种好的方式呢，还是通过 props 传递 uuid 再到 vuex 里面去获取响应的数据呢？

VDimos

Mar 30, 2018 via Android

子组件对 props 的修改不会反应到父组件，在子组件里修改 prop 会触发警告。解决方案是定义局部 data，把 prop 用来初始化

ghostgril

Mar 30, 2018

@VDimos 对啊，就是这个初始化在哪进行的问题。

VDimos

Mar 30, 2018 via Android

@ghostgril 把 props 的值给 data 不就行了？

props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}

ghostgril

Mar 30, 2018

@VDimos 如果是普通的值是可以的，但是如果传过来是对象呢就必须执行初始化

ghostgril

Mar 30, 2018

@VDimos 应该说是必须进行深克隆，否则修改会修改里面的内容

heww

Mar 30, 2018

@ghostgril #6 是的，用 clone，我们一般用 lodash 的 clone 来处理。

VDimos

Mar 30, 2018 via Android

@ghostgril 我一般只传递扁平化的对象，两层及以上。所以一般直接用 Object.assign 或者赋值解析就行了。如果超过两层的复杂对象，不推荐使用 props 来传递，用状态管理工具更好

VDimos

Mar 30, 2018 via Android

@ghostgril 说错了，两层及两层以上不用 props 传递

yilin12

Mar 30, 2018

用 computed 处理父组件传递进来的 props