vue单向数据流的深入讲解

来源：互联网收集：自由互联发布时间：2023-02-08

目录 vue单向数据流代码示例特殊情况注意点: 总结 vue单向数据流在vue中需要遵循单向数据流原则在父传子的前提下，父组件的数据发生会通知子组件自动更新子组件内部，不能直接

vue单向数据流

在vue中需要遵循单向数据流原则

在父传子的前提下，父组件的数据发生会通知子组件自动更新
子组件内部，不能直接修改父组件传递过来的props => props是只读的

代码示例

父组件代码：

<template>
  <div style="border: 1px solid #000">
    <h1>我是父组件</h1>
    <Son :info="info" :person="person"></Son>
    <button @click="fn">修改数据（父）</button>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  data() {
    return {
      info: "我是父组件中的数据",
      person: ["张三", "李四", "赵六"],
    };
  },
  components: {
    Son,
  },
  methods: {
    fn() {
      this.info = "我是父组件中点击修改后的数据";
    },
  },
};
</script>

<style scoped>
</style>

子组件代码：

<template>
  <div>
    <h2>我是子组件</h2>
    <p>{{ info }}</p>
    <p v-for="(item, index) in person" :key="index">{{ item }}</p>
    <button @click="fn">修改数据（子）</button>
  </div>
</template>

<script>
export default {
  props: ["info", "person"],
  methods: {
    fn() {
      // 修改基本数据类型
      this.info = this.info + ",我现在被传递到子组件中";
      // 修改引用数据类型
      // this.person.push("韩七");
    },
  },
};
</script>

<style scoped>
div {
  border: 1px solid red;
  margin: 10px;
}
</style>

当我们在父组件中点击按钮时，会将父组件中的数据进行修改，这样子组件通过props接收的数据也会随之改变，这就印证了vue遵循单向数据流的第一条原则，在父传子的前提下，父组件的数据发生变化会通知子组件自动更新