请教关于 props 单向数据流

[waiaan]

<template>
    <el-select
      class="mr__m"
      :value="value"
      placeholder="请先选择分类"
      filterable
      @input="change($event)"
    >
      <el-option
        v-for="(option, index) in list"
        :key="'categoryOptions' + index"
        :label="option.dictValue"
        :value="option.dictKey"
      />
    </el-select>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: _ => []
    },
    value: {
      type: [String, Object]
    }
  },
  methods: {
    change(val) {
      this.$emit('input', val)
    }
  }
}
</script>

这种封装方式是不是违背了数据单项流动的原则？好一点的写法应该是怎么样的？

谢谢。

[wu67]

按我的理解, 单向的意思是他只能用父传给子、祖先传给后代, 同时不应直接改这个值.
直接改可能会有什么情况呢? 界面更新不及时(响应性问题)、追踪困难(无法知道是哪里的代码变更了数据).

你可以直接 watch value, 然后赋值给另一个变量 viewValue, select 绑定 viewValue, select 组件选中的时候, 通过事件通知父组件变更 value 的值.

[IvanLi127]

看起来不违反，能圈个重点吗？

[zsj1029]

强烈尝试 mithril.js 可以用 jsx 语法，小而强大，前端目前越发的无限复杂，90%都在做无用功

[zsj1029]

@zsj1029 angular vue react 都用来写过项目，最后发现 mithriljs 足矣，当然自己要会写 ui ，如果只是套三大的各类现成 ui 库，还是拿来主义效率高

[V1Eerie]

我觉得没有违反。最好保证每次改变值的时候都能及时更新。

[jqtmviyu]

我觉得没有违反。 数据还是在父组件那里管理，子组件只是通知父组件更新。

如果子组件直接把原始数据改了，这份数据又在其他地方用到，追踪起来就乱了，根本不知道是哪位子组件改的。

[bojackhorseman]

这样写 vue 会警告的吧，建议用 writeable computed 来处理，get 返回 value 的值，set 调用 this.$emit(input, val)

[waiaan]

@wu67
@bojackhorseman
这样有个问题，就是子组件抛出事件后，又会触发子组件上 value 的 watcher

@IvanLi127
@V1Eerie
@jqtmviyu
子组件不是通过抛出事件来改变父组件中的值，而是直接修改。