Vue組件傳值過程接收不成功

第一個方式

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

deep: true 使用深度監(jiān)聽監(jiān)聽傳過來的數(shù)據(jù) （如果數(shù)組的情況）

第二種方式

mounted() {
    this.getoptions()
  }

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

如果值傳過來了 再進(jìn)行后續(xù)部分 避免頁面報錯

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

又因為 = 不會觸發(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()可以解決不重新渲染的問題

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

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

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

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

場景解析

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

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

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

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

乍一看,是不是沒有啥問題，但是子組件那邊用definProps拿到的值，它就是空的。

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

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

v-if

為了解決這個問題，我使用了監(jiān)聽等各種方法，都沒有成功，最后，我使用了v-if

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

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

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

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

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

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

ref

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

一個簡單的賦值語句，相信基礎(chǔ)好的已經(jīng)看出來了。

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

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

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

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

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

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

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

事情到這里似乎就解決了

reactive

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

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

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

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

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

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

總結(jié)

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

3個解決方案：

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

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

最新評論