vue組件中props與data的結(jié)合使用方式

更新時間：2022年10月18日 10:58:35 作者：左直拳

這篇文章主要介紹了vue組件中props與data的結(jié)合使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

組件中props與data的結(jié)合使用

如前所述（vue組件屬性（props）及私有數(shù)據(jù)data），vue組件中，props是組件公有屬性，對外；data是組件的私有數(shù)據(jù)，對內(nèi)。正因為props對外，由外部賦值，因此在組件內(nèi)部，是只讀的，即組件內(nèi)部不適宜去改變這些元素的值。當然，改也可以改，但運行時刻會有告警。

正如我們寫一個函數(shù)，對于傳入的參數(shù)，我們一般是只讀對待的，極少會去修改它的值一樣。當然，這只是一種編碼約定，你硬是要改，也無話可說，改了就改了。

同時，props是在開發(fā)時，預先設置好，傳給組件的。在運行過程中，這些設置是一錘子買賣，以后就不起作用了。假如我們想調(diào)用該組件的一個方法，而該方法又依賴于props，問題就出來了：props是舊的。

這個時候，組件開發(fā)過程中，應該將props與data相結(jié)合。在組件內(nèi)部，應該依賴于data，而data的初始值來自于props:

組件

export default {
? props: {
? ? id: { default: 0 }
? },
? data () {
? ? return {
? ? ? myId: this.id //用props的id初始化
? ? }
? },
? methods: {
? ? pop (id) { // 供外部調(diào)用
? ? ? this.myId = id
? ? ? alert(this.id)
? ? ? alert(this.myId)
? ? }
? }
}

調(diào)用組件：

<template>
? <div>
? ?? ?<!-- 將變量id的值賦給組件的id屬性，一錘子買賣 -->
? ? <Pop ref="popWin" :id="id" />
? </div>
</template>
<script>
import Pop from './_pop.vue'
export default {
? components: {
? ? Pop
? },
? data () {
? ? return {
? ? ? id: 0
? ? }
? },
? methods: {
? ? showDetail (id) {//頁面的id也是由外部傳進來的，事先不可能知道
? ? ? this.id = id //保存了id，但影響不了組件Pop
? ? ? this.$refs.popWin.pop(id) // 調(diào)用Pop組件的方法,并傳遞id
? ? }
? }
}
</script>

2021.07.22補充：

還有另一種機制，就是子組件監(jiān)控props里的屬性，當該屬性變化時，就觸發(fā)，處理相應的邏輯。

流程是這樣：父組件或頁面，將通過變量傳值給子組件的props，子組件監(jiān)控props。如果父組件在運行過程中，想動態(tài)更改這個屬性，那就更改自己的變量。由于有監(jiān)控（watch）機制存在，子組件被觸發(fā)。

父組件或頁面

<template>
? ?<div><Report ref="report1" :id="myId"/></div>
</template>
<script>
import Report from './_report.vue'
export default {
? components: {
? ? Report
? },
? data () {
? ? return {
? ? ? myId: 0,
? ? }
? },
? methods: {
? ? init (id) {
? ? ? this.myId = id //改變id值
? ? }
? }
}
</script>

組件_report.vue：

<template>
?? ?<div>我是子組件，名曰謝康樂，一箭射雙鶴</div>
</template>
<script>
export default{
? watch: {
? ? id (val) {
? ? ? alert('id變了，我是不是應該做點什么？')
? ? }
? }
}
</script>

2021.07.23補充：

監(jiān)視比父組件調(diào)用子組件方法控制更為合理，耦合程度更低。你值得擁有。

子組件中data從props中動態(tài)更新數(shù)據(jù)

考慮這樣一種情況，Vue 的父組件根據(jù)網(wǎng)絡請求獲取到數(shù)據(jù)后，動態(tài)更新到子組件的 props 上，

// 父組件
<template>
? <div class="parent">
? ? <chart :info='info'/>
? </div>
</template>

// 子組件
<template>
  <div class="child">
    <ul>
      <!-- 此處 info 來自 props -->
      <li v-for="i in info" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  data () {},
}
</script>

走到這一步，都很順利，子組件能響應父組件的數(shù)據(jù)，進行動態(tài)更新。

但是，

實際項目中，往往要對子組件上接收到的數(shù)據(jù)進行操作處理，然后才能通過 data 渲染到頁面上，這時就會發(fā)現(xiàn)，父組件上的數(shù)據(jù)變化，子組件不再能響應并及時更新了。

在子組件上把數(shù)據(jù)直接渲染到模型上即可。

// 子組件
<template>
  <div class="child">
    <ul>
      <!-- 此處 list 來自 data -->
      <li v-for="i in list" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  data () {
    return {
      list:[],
    }
  },
  mounted(){
    this.list = this.info.map(i => '0_'+i)
  },
}
</script>

原因很簡單，從 props 的 info 傳遞給 data 的 list ，只有一次操作，就是在 mounted 中，往后即使 props 的 info 發(fā)生了變化，data 也接收不到。

問題在于數(shù)據(jù)在傳遞過程中不能及時關聯(lián)，針對這一點，可以用 watch 來進行跟蹤，如下即可

// 子組件
<template>
  <div class="child">
    <ul>
      <!-- 此處list 來自 data -->
      <li v-for="i in list" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  data () {
    return {
      list:[],
    }
  },
  mounted(){
    // this.list = this.info.map(i => '0_'+i)
  },
  watch: {
    info() {
      this.list = this.info.map(i => '0_'+i)
    }
  }
}
</script>

后記：

以上操作其實也是走了一些彎路，對于這種通過對 props 數(shù)據(jù)操作再賦值給子組件 data ，導致子組件 data 不能根據(jù) 父組件傳值變化而及時更新數(shù)據(jù)的情況。直接用計算屬性 computed ： list

// 子組件
<template>
  <div class="child">
    <ul>
      <!-- 此處comp 來自 computed -->
      <li v-for="i in comp" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  computed: {
    comp (){
      return this.info.map(i => '0_'+i)
    }
  },
}
</script>

如上即可

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: