Vue組件傳值過(guò)程接收不成功

第一個(gè)方式

  watch: {
    currentleCode: {
      handler() {
        this.setOptions()
      },
      deep: true
    }
  },

deep: true 使用深度監(jiān)聽(tīng)監(jiān)聽(tīng)傳過(guò)來(lái)的數(shù)據(jù) （如果數(shù)組的情況）

第二種方式

mounted() {
    this.getoptions()
  }

methods: {
    getoptions() {
      if (this.options) {
        this.setOptions()
      } else {
        setTimeout(() => {
          this.getoptions()
        }, 100)
      }
    }
   }

如果值傳過(guò)來(lái)了 再進(jìn)行后續(xù)部分 避免頁(yè)面報(bào)錯(cuò)

額外注意的是 組件賦值的時(shí)候我們都喜歡用 =

又因?yàn)?= 不會(huì)觸發(fā)Vue的set（）和get()

所以推薦大家以后用set

// this.filterOptions[this.cuoduleCode] = res.data
this.$set(this.filterOptions, this.curreeCode, res.data)

Vue.set()和this.$ set()的區(qū)別在于：Vue.set()是將set函數(shù)綁定在Vue構(gòu)造函數(shù)上，this.$set()是將set函數(shù)綁定在Vue原型上。

使用Vue.set()和this.$ set()可以解決不重新渲染的問(wèn)題

Vue組件異步數(shù)據(jù)傳值問(wèn)題

在組件傳值中有時(shí)會(huì)遇到傳的值是異步請(qǐng)求的數(shù)據(jù)，從而導(dǎo)致一些可能的問(wèn)題。

如：父?jìng)髯?。父組件中發(fā)起請(qǐng)求拿到數(shù)據(jù)，將數(shù)據(jù)傳給子組件，子組件卻接收不到值。

在網(wǎng)上搜索了很多，也看了很大大佬的解決方法，如使用監(jiān)聽(tīng)器監(jiān)聽(tīng)傳過(guò)來(lái)的數(shù)值等，但是都沒(méi)有解決問(wèn)題(可能是我沒(méi)有學(xué)到家)，但是最后還是靠其他大佬解決了問(wèn)題，做了總結(jié)，讓學(xué)習(xí)Vue的小伙伴們可以更好的學(xué)習(xí)。

場(chǎng)景解析

傳值的數(shù)據(jù)是引用數(shù)據(jù)類型，你使用了reactive

<template>
    <Child :data='data'></Child>
</template>

<script setup>
let data = reactive([])

onMounted(()=>{
    請(qǐng)求.then(res=>{
        data = res.data
    })
})
</script>

乍一看,是不是沒(méi)有啥問(wèn)題，但是子組件那邊用definProps拿到的值，它就是空的。

起初我的想法是，因?yàn)檎?qǐng)求是異步的，子組件拿到的是初始化的空數(shù)組，然后父組件中才拿到請(qǐng)求回來(lái)的值。為了驗(yàn)證我的想法，我在父子組件中都設(shè)置了一個(gè)按鈕，用來(lái)獲取當(dāng)前的數(shù)值。

頁(yè)面加載完畢后，點(diǎn)擊父組件的按鈕，有值；點(diǎn)擊子組件的按鈕，空值；手動(dòng)影響父組件，致使父組件再次渲染，此時(shí)再去點(diǎn)擊子組件的按鈕，嗯哼？有值了，所以想法應(yīng)該是沒(méi)有大問(wèn)題的。

v-if

為了解決這個(gè)問(wèn)題，我使用了監(jiān)聽(tīng)等各種方法，都沒(méi)有成功，最后，我使用了v-if

<template>
    <Child v-if='flag' :data='data'></Child>
</template>

<script setup>
let data = reactive([])
let flag= ref(false)

onMounted(()=>{
    請(qǐng)求.then(res=>{
        data = res.data
        flag.value = true
    })
})
</script>

在拿到請(qǐng)求后再去加載子組件，說(shuō)白了就是讓子組件的渲染時(shí)機(jī)跟著請(qǐng)求走。

這樣子確實(shí)解決了，但是，總感覺(jué)不是很優(yōu)雅。

所以，找了大佬，發(fā)現(xiàn)，數(shù)據(jù)那里出問(wèn)題了。

ref

let data = reactive([])
data = res.data

一個(gè)簡(jiǎn)單的賦值語(yǔ)句，相信基礎(chǔ)好的已經(jīng)看出來(lái)了。

我的data是reactive修飾的，是響應(yīng)式數(shù)據(jù)，但是，我居然直接將請(qǐng)求回來(lái)的數(shù)據(jù)賦值給了`data`，于是原對(duì)象被覆蓋，失去了響應(yīng)性。

于是，它成為了一個(gè)平凡的數(shù)據(jù)，失去了響應(yīng)性的它，不再被`實(shí)時(shí)`的關(guān)注，子組件也不會(huì)第一時(shí)間的注意它，它只能循規(guī)蹈矩，只有父組件發(fā)生變動(dòng)，它的存在才會(huì)被注意一下。

所以！為了不讓它平凡，我是使用了ref?。?

<template>
    <Child :data='data'></Child>
</template>

<script setup>
let data = ref([])
let flag= ref(false)

onMounted(()=>{
    請(qǐng)求.then(res=>{
        data.value = res.data
    })
})
</script>

哦，好奇妙，.value后它依然保持著響應(yīng)性，傳到子組件的它被'實(shí)時(shí)'的關(guān)注著，一旦有了變化有了值，馬上就會(huì)被公之于眾，渲染在頁(yè)面上，good！

事情到這里似乎就解決了

reactive

但是！我就是想用reactive，即使平凡，我也想要保持初心，所以我尋求了朋友的幫助

<template>
    <Child :data='data'></Child>
</template>

<script setup>
let friend = reactive({
    data:[]
})
let flag= ref(false)

onMounted(()=>{
    請(qǐng)求.then(res=>{
        friend.data= res.data
    })
})
</script>

哦，在朋友的擁護(hù)與支持下，data成為了屬性。

問(wèn)題解決，proxy會(huì)監(jiān)聽(tīng)對(duì)象屬性的變化，即使屬性改變，依然會(huì)保持整個(gè)對(duì)象的響應(yīng)性。

總結(jié)

原因：數(shù)據(jù)失去了響應(yīng)性，不管你用的ref還是reactive，要認(rèn)真查看，數(shù)據(jù)是否失去了響應(yīng)性

3個(gè)解決方案：

• 1.v-if
• 2.ref
• 3.reactive包裝

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

最新評(píng)論