V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ghostgril
V2EX  ›  Vue.js

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

  •  
  •   ghostgril · 2018-03-30 10:45:11 +08:00 · 3293 次点击
    这是一个创建于 2190 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    一般大家是怎么处理的呢

    10 条回复    2018-03-30 12:41:42 +08:00
    ghostgril
        1
    ghostgril  
    OP
       2018-03-30 10:46:52 +08:00
    直接通过 props 传递数据是否是一种好的方式呢,还是通过 props 传递 uuid 再到 vuex 里面去获取响应的数据呢?
    VDimos
        2
    VDimos  
       2018-03-30 11:07:40 +08:00 via Android
    子组件对 props 的修改不会反应到父组件,在子组件里修改 prop 会触发警告。解决方案是定义局部 data,把 prop 用来初始化
    ghostgril
        3
    ghostgril  
    OP
       2018-03-30 11:16:47 +08:00
    @VDimos 对啊,就是这个初始化在哪进行的问题。
    VDimos
        4
    VDimos  
       2018-03-30 11:19:14 +08:00 via Android
    @ghostgril 把 props 的值给 data 不就行了?

    props: ['initialCounter'],
    data: function () {
    return { counter: this.initialCounter }
    }
    ghostgril
        5
    ghostgril  
    OP
       2018-03-30 11:38:52 +08:00
    @VDimos 如果是普通的值是可以的,但是如果传过来是对象呢就必须执行初始化
    ghostgril
        6
    ghostgril  
    OP
       2018-03-30 11:39:32 +08:00
    @VDimos 应该说是必须进行深克隆,否则修改会修改里面的内容
    heww
        7
    heww  
       2018-03-30 11:43:39 +08:00
    @ghostgril #6 是的,用 clone,我们一般用 lodash 的 clone 来处理。
    VDimos
        8
    VDimos  
       2018-03-30 12:21:50 +08:00 via Android
    @ghostgril 我一般只传递扁平化的对象,两层及以上。所以一般直接用 Object.assign 或者赋值解析就行了。如果超过两层的复杂对象,不推荐使用 props 来传递,用状态管理工具更好
    VDimos
        9
    VDimos  
       2018-03-30 12:25:20 +08:00 via Android
    @ghostgril 说错了,两层及两层以上不用 props 传递
    yilin12
        10
    yilin12  
       2018-03-30 12:41:42 +08:00
    用 computed 处理父组件传递进来的 props
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1002 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:20 · PVG 06:20 · LAX 15:20 · JFK 18:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.