快捷導(dǎo)航

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

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

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

前言

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

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 來接收父組件的值，然后通過插值表達(dá)式渲染在頁面中。

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

常見的類型約束如下：

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

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

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

//兩個(gè)組件公共的自定義函數(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>

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

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

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

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

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

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

當(dāng)父組件的屬性改變，會(huì)傳遞給子組件，而子組件的屬性改變不會(huì)影響父組件，這樣的話可能會(huì)覺得 props 有點(diǎn)雞肋了，只能初始化組件的時(shí)候使用，在子組件內(nèi)不能進(jìn)行操作，因此我們在使用的時(shí)候經(jīng)常有兩種板房去操作props:（1）定義一個(gè)局部變量，并用props 初始化它，以后操作這個(gè)局部變量。（2）定義一個(gè)計(jì)算屬性，處理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'>點(diǎn)我</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",
        }
      },
    })

總結(jié)

到此這篇關(guān)于vue父子組件傳值以及單項(xiàng)數(shù)據(jù)流問題的文章就介紹到這了,更多相關(guān)vue父子組件傳值及單項(xiàng)數(shù)據(jù)流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: