首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue单向数据流

vue单向数据流的深入讲解

2022-07-15 09:29:47 作者：韬光养晦,厚积薄发

单向数据流方式使用一个上传数据流和一个下传数据流进行双向数据通信,两个数据流之间相互独立,下面这篇文章主要给大家介绍了关于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遵循单向数据流的第一条原则，在父传子的前提下，父组件的数据发生变化会通知子组件自动更新