在 Vue 里, props 传入 Object 或 Array 的最佳实践是什么?

查看 14|回复 0
作者:llbbzh   
如果一个 Vue 组件接受一个 Object 或者 Array 作为 prop ,那在这个组件内部处理该 prop 时就会有很多种写法,我很好奇,到底哪种是最佳实践呢?
从组件使用该 prop 的方式来看,可以分成两种类型:
  • 外部状态型。 就是直接拿 prop 值来渲染,修改时也直接修改原 prop 内部的内容。比如,我写了个表格组件,在里面直接用 v-for 遍历 prop 里的数组来显示表格的每一行。
  • 内部状态型。 就是内部还有一个 ref/data 值,其初始值为传入的 prop 。如果要修改数据,则仅修改内部的 ref/data ,然后通过一些方式与外部的 prop 同步。比如,我写了个表格组件,我在 created 时把 prop 复制一遍,模板里 v-for 遍历的是我复制过的这个数组。然后我 watch 外部 prop ,如果它变化了,我就再复制一遍。

    从组件向外发布新数据的方式看,又能分成三种类型:
  • 直接修改型。 就是组件把 prop object / array 里面的元素或者属性直接绑定到 v-model 上,或者直接用 JS 改外部传进来的 prop 值。我在 vue-element-admin 里见过这种操作,里面有个组件可以开关表格的各个列,然后用这个组件时只需要把记录各个列开关状态的数组用 prop 传进去,不需要监听 update 事件。
  • 修改后通知型。 指的是组件会直接修改 prop object / array 里面的元素,但是修改完之后会触发 emit 事件,把 prop 值原封不动地 emit 出去。
  • 不可变对象型。 指组件永远不直接修改外部 prop ,而是每次修改前都把整个对象(或数组)克隆一遍,修改新的对象,再通过 emit update 事件把新的对象传出去。

    这几种写法各有优缺点,你的项目用的是什么写法?最推荐的写法到底是啥?
  • 您需要登录后才可以回帖 登录 | 立即注册

    返回顶部