單向數(shù)據(jù)流方式使用一個上傳數(shù)據(jù)流和一個下傳數(shù)據(jù)流進行雙向數(shù)據(jù)通信,兩個數(shù)據(jù)流之間相互獨立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

vue單向數(shù)據(jù)流

在vue中需要遵循單向數(shù)據(jù)流原則

在父傳子的前提下，父組件的數(shù)據(jù)發(fā)生會通知子組件自動更新
子組件內(nèi)部，不能直接修改父組件傳遞過來的props => props是只讀的

代碼示例

父組件代碼：

<template>
  <div style="border: 1px solid #000">
    <h1>我是父組件</h1>
    <Son :info="info" :person="person"></Son>
    <button @click="fn">修改數(shù)據(jù)（父）</button>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  data() {
    return {
      info: "我是父組件中的數(shù)據(jù)",
      person: ["張三", "李四", "趙六"],
    };
  },
  components: {
    Son,
  },
  methods: {
    fn() {
      this.info = "我是父組件中點擊修改后的數(shù)據(jù)";
    },
  },
};
</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">修改數(shù)據(jù)（子）</button>
  </div>
</template>

<script>
export default {
  props: ["info", "person"],
  methods: {
    fn() {
      // 修改基本數(shù)據(jù)類型
      this.info = this.info + ",我現(xiàn)在被傳遞到子組件中";
      // 修改引用數(shù)據(jù)類型
      // this.person.push("韓七");
    },
  },
};
</script>

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

當我們在父組件中點擊按鈕時，會將父組件中的數(shù)據(jù)進行修改，這樣子組件通過props接收的數(shù)據(jù)也會隨之改變，這就印證了vue遵循單向數(shù)據(jù)流的第一條原則，在父傳子的前提下，父組件的數(shù)據(jù)發(fā)生變化會通知子組件自動更新

當我們在子組件中點擊按鈕時，我們將父組件傳遞過來的數(shù)據(jù)進行修改，此時在子組件中數(shù)據(jù)得到修改，但是會報錯，并且，父組件中的數(shù)據(jù)不會發(fā)生改變

然后我們用vue調(diào)試工具再來看一下，子組件中的數(shù)據(jù)發(fā)生變化，父組件的數(shù)據(jù)有沒有跟著一起變化

從上面可見知道，父組件的數(shù)據(jù)發(fā)生變化會通知子組件自動更新，但是修改子組件通過props從父組件接收的數(shù)據(jù)時，它不會通知父組件自動更新，

特殊情況

上面講述的是將基本數(shù)據(jù)類型改變會報錯，那么將引用數(shù)據(jù)類型改變會不會報錯呢，答案是否定的，如果父組件傳給子組件的是一個引用數(shù)據(jù)類型，這里用數(shù)組為例，子組件修改數(shù)組內(nèi)的元素，是不會報錯的，數(shù)組是引用類型，互相更新，但不能改變引用地址，下面看一下效果