聊一聊Vue的单向数据流-阿里云开发者社区

聊一聊Vue的单向数据流

2022-05-21 144

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 聊一聊Vue的单向数据流

Vue官方对单向数据流的描述是这样的（去掉了几句）：父子 prop 之间形成了一个单向下行绑定，父级 prop 的更新会向下流动到子组件中，额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。

意思是说，父级给子组件是啥，子组件可以用，也可以不用，但是不能修改。这就保证了数据可控性，但是事实真的如此吗？官方文档下面还有一句话。

注意：JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

对JavaScript数据类型了解的小伙伴，应该很好理解这句话的意思，如果不了解的，可以读JavaScript 的基本类型和引用类型了解。这里就不过多说。

1 基本数据类型传递

我们先来传递基本数据类型，然后在子组件中修改，看控制台如何提示首先定义一个父组件，只引用一个子组件，只传递一个基本数据类型的index

<template>
  <div>
    <Footer :index="index"></Footer>
  </div>
</template>
<script>
import Footer from "@/components/Footer";
export default {
  components: {
    Footer
  },
  data() {
    return {
      index: 1
    };
  }
};
</script>
<style scoped></style>

复制

子组件接收父组件的值，点击事件给index++

<template>
  <div>
    {{ index }}
    <div @click="change">改变index</div>
  </div>
</template>
<script>
export default {
  props: {
    index: {
      type: Number
    }
  },
  data() {
    return {};
  },
  methods: {
    change() {
      this.index++;
    }
  }
};
</script>
<style scoped></style>

复制

在控制台会发现如下报错

正如官方所说你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

2 引用类型数据传递

引用类型对象中包含数组

<template>
  <div>
    <Footer :Obj="Obj"></Footer>
  </div>
</template>
<script>
import Footer from "@/components/Footer";
export default {
  components: {
    Footer
  },
  data() {
    return {
      Obj: {
          name:'父组件',
          value:"这是值",
          Arr:[1,2,3,4,5]
      }
    };
  }
};
</script>
<style scoped></style>

复制

子组件接收，并且通过事件修改值

<template>
  <div>
    {{ Obj }}
    <div @click="change">改变index</div>
  </div>
</template>
<script>
export default {
  props: {
    Obj: {
      type: Object
    }
  },
  data() {
    return {};
  },
  methods: {
    change() {
      this.Obj.name = "我修改了";
      this.Obj.arr.push(6)
    }
  }
};
</script>
<style scoped></style>