vue的单向数据流

单向数据流 最典型的 就是props。props都是父组件向子组件传递数据。子组件只能使用传递过来的并不能操作他。

也就是说 a数据 流向b数据 这条线是通的 但是 b流向a是不通的。

<template>
  <div>
    <div>
      <input v-model="msg" type="text" />
      <button @click="add">添加</button>
    </div>
    <ul>
      <li v-for="(item, index) in listMy" :key="index">{{ test(item) }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "ListMy",
    data() {
      return {
        msg: "",
      };
    },
    props: ["list"],
    methods: {
      add() {
        // 这里直接修改了 props 传递的 list 破坏了 props 单向流 会报错
        this.list = [...this.list, this.msg];
      },
    },
  };
</script>

<style scoped>
  li {
    list-style: none;
  }
</style>

单向数据： a组件可以流向b 但是并没有b流向a的线

把props数据做为本地数据使用

在这种情况下，最好定义一个本地的 data property 并将这个 prop 用作其初始值

这个时候操作listMy 但是initialCounter如果是引用类型会影响父组件数据

export default {
  name: "ListMy",
  data() {
    return {
      msg: "",
      listMy: this.list,
    };
  },
};

需要对传入的数据进行转换

在这种情况下，最好使用这个 prop 的值来定义一个计算属性或者方法

export default {
  name: "ListMy",
  data() {
    return {
      msg: ""
    };
  },
  props: ["list"],
  methods: {
    test: function(item) {
      return item + " @ "
    },
  },
  
};