快捷導(dǎo)航

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

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

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

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

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

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

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

這個(gè)時(shí)候，組件開發(fā)過程中，應(yīng)該將props與data相結(jié)合。在組件內(nèi)部，應(yīng)該依賴于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) {//頁(yè)面的id也是由外部傳進(jìn)來的，事先不可能知道
? ? ? this.id = id //保存了id，但影響不了組件Pop
? ? ? this.$refs.popWin.pop(id) // 調(diào)用Pop組件的方法,并傳遞id
? ? }
? }
}
</script>

2021.07.22補(bǔ)充：

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

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

父組件或頁(yè)面

<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變了，我是不是應(yīng)該做點(diǎn)什么？')
? ? }
? }
}
</script>

2021.07.23補(bǔ)充：

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

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

考慮這樣一種情況，Vue 的父組件根據(jù)網(wǎng)絡(luò)請(qǐng)求獲取到數(shù)據(jù)后，動(dòng)態(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>

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

但是，

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

在子組件上把數(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>

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

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

// 子組件
<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>

后記：

以上操作其實(shí)也是走了一些彎路，對(duì)于這種通過對(duì) props 數(shù)據(jù)操作再賦值給子組件 data ，導(dǎo)致子組件 data 不能根據(jù) 父組件傳值變化而及時(shí)更新數(shù)據(jù)的情況。直接用計(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>

如上即可

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

您可能感興趣的文章: