vue父子組件傳值以及單向數(shù)據(jù)流問題詳解

更新時間：2021年09月08日 16:01:50 作者：丶Serendipity丶

大家應該都知道父組件可以向子組件通過屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時隨意修改;但子組件不能修改父組件傳遞過來的參數(shù),所以下面這篇文章主要給大家介紹了關于vue父子組件傳值以及單向數(shù)據(jù)流問題的相關資料,需要的朋友可以參考下

前言

我們知道 vue 中父子組件的核心概念是單向數(shù)據(jù)流問題，props 是單向傳遞的。那究竟什么是單向數(shù)據(jù)流問題，這篇文章來總結一下關于這個知識點的學習筆記。

1.父組件傳值給子組件

<div id="app">
    <blog-item :title="title"></blog-item>
</div>
// 定義子組件
Vue.component("blog-item", {
      props: ['title'],
      data() {
        return {
        }
      },
      template: "<p>{{title}}</p>"
 })
// 定義父組件
new Vue({
      el: "#app",
      data() {
        return {
          title: "msg",
        }
      },
    })

父組件通過 :title = "title" 將值傳遞給子組件，子組件中通過 props 來接收父組件的值，然后通過插值表達式渲染在頁面中。

2.子組件的 props 類型約束問題

常見的類型約束如下：

props: {
      title: String,
      likes: Number,
      isPublished: Boolean,
      commentIds: Array,
      author: Object,
      callback: Function,
      contactsPromise: Promise // or any other constructor
    }

除了上面常見的類型外，vue 還提供了構造函數(shù)和自定義函數(shù)來自定義子組件 props 的類型。

（1）構造函數(shù)自定義類型

//兩個組件公共的自定義函數(shù)
      function Person (firstName, lastName) {
        this.firstName = firstName
        this.lastName = lastName
      }
      //子組件中使用
      Vue.component('blog-post', {
      props: {
        author: Person
      }
      //父組件中使用
      var obj = new Person("1","2")
      <blog-post :author='obj'></blog-post>

上面的代碼中，首先定義一個公共的自定義構造函數(shù)，通過該構造函數(shù)來可以來創(chuàng)建一個對象，該實例對象有兩個屬性，分別是 firstName 和 lastName，在父組件中調(diào)用該構造函數(shù)創(chuàng)建一個 obj 實例并傳遞給子組件，子組件定義類型為構造函數(shù)的 prop 接收該對象。

（2）自定義函數(shù)自定義類型

// 自定義函數(shù)
     Vue.component('blog-post', {
      props: {
        propsA: String,//必須是字符串類型
        propsB: [String,Number],//多個可選的類型
        propsC: {type:Number,default:100},//定義類型并設置默認值
        // 自定義驗證函數(shù)
        propsD:{
          validator: function (value) {
            // 這個值必須匹配下列字符串中的一個
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
         }
        }
      }

vue 中提供了非常靈活的來自定義子組件接收參數(shù)的類型，上面的代碼中通過自定義了驗證函數(shù)來約束父組件中的傳值類型。

3.單向數(shù)據(jù)流問題

單向數(shù)據(jù)流是vue 中父子組件的核心概念，props 是單向綁定的。當父組件的屬性值發(fā)生變化的時候，會傳遞給子組件發(fā)生相應的變化，從而形成一個單向下行的綁定，父組件的屬性改變會流向下行子組件中，但是反之，為了防止子組件無意間修改了父組件中的數(shù)據(jù)而影響到了其他的子組件的狀態(tài)，vue 規(guī)定了從下往上的數(shù)據(jù)流是不允許的。

當父組件的屬性改變，會傳遞給子組件，而子組件的屬性改變不會影響父組件，這樣的話可能會覺得 props 有點雞肋了，只能初始化組件的時候使用，在子組件內(nèi)不能進行操作，因此我們在使用的時候經(jīng)常有兩種板房去操作props:（1）定義一個局部變量，并用props 初始化它，以后操作這個局部變量。（2）定義一個計算屬性，處理props并返回。

<div id="app">
    <blog-item :title="title1"></blog-item>
    <blog-item :title="title2"></blog-item>
    <blog-item :title="title3"></blog-item>
    <hr>
    <button @click='toclick'>點我</button>
  </div>
  // 定義子組件
    Vue.component("blog-item", {
      props: ['title'],
      data() {
        return {
        }
      },
      template: "<p>{{title}}</p>"
    })
    // 父組件
    new Vue({
      el: "#app",
      data() {
        return {
          title1: "111",
          title2: "222",
          title3: "333"
        }
      },
      methods: {
        toclick() {
          this.title3 = "000"
        }
      }
    })

<div id="app">
    <blog-item :title="title"></blog-item>
  </div>
  // 定義子組件
    Vue.component("blog-item", {
      props: ['title'],
      computed: {
        computedTitle() {
          return "computedTitle" + this.title
        }
      },
      data() {
        return {
          subTitle: "subTitle" + this.title
        }
      },
      template: "<p>{{title}}==={{subTitle}}==={{computedTitle}}</p>"
    })
    // 父組件
    new Vue({
      el: "#app",
      data() {
        return {
          title: "111",
        }
      },
    })