改变 props 数据问题

Question

vue 不是不建议在 props 中直接改掉父组件的数据吗？

Answer 1

Sunday 2022-06-09 14:34:33

你好

vue 之所以不建议修改 props 中父父组件的数据，是因为担心修改父组件数据导致单向数据流的结构被破坏。但是我们新增的 _style 数据则不同，在 JS 统一认知的标准中 _ 开头的变量表示不希望被外界访问的数据，也就是说这个 _style 是子组件内部独特访问的，所以并不会影响单向数据流。

• 吕士杰 #1

  老师，通过下滑线开头的命名规则，修改父组件的prop值，还是会触发父组件对prop的watch。
  
  父组件：
  <m-waterfall
        :data="pexelsList"
        nodeKey="id"
        :column="5"
        :picturePreReading="true"
      >
        <template v-slot="{ item, width }">
          <item-vue :data="item"></item-vue>
        </template>
      </m-waterfall>
  
  watch(
    pexelsList,
    (newVal) => {
      console.log(JSON.stringify(newVal))
    },
    {
      deep: true
    }
  )

• 吕士杰 #2

  JSON.stringify(newVal)一共执行了两次，第一次是接口返回时，这时候列表数据没有_style，第二次触发的时候，是瀑布流组件内部修改prop，控制台再次打印时候，列表数据有_style了。
  所以直接修改props可能还是会影响单项数据流的问题。

• Sunday 回复 吕士杰 #3

  watch 是肯定会触发的，只是根据约定规范 _开头的变量表示内部元素。就像常量应该为 大写一样。