vue data有值,但是頁(yè)面{{}} 取不到值的解決
我的問(wèn)題出在js引入的順序不對(duì)，導(dǎo)致不能正常顯示vue中的值
正確的順序應(yīng)該是：
先引入vue的js--------html代碼-----最后引入自己寫(xiě)的js
補(bǔ)充知識(shí)：vue中子組件的created、mounted生命周期鉤子中獲取不到props中的值問(wèn)題
父子組件通信
這個(gè)很簡(jiǎn)單，父組件中使用v-bind綁定傳送，子組件使用props接收即可 。
例如：在父組件中
<template> <div> <div :Data="Data"></div> </div> </template>
<script>
data(){
return {
Data: [10,20,30]
}
},
</script>
子組件中：
export default{
props:{
type:Array,
default(){
return []
}
}
}
這種情況下你的Data值是固定的，子組件的 methods 中想要取到props中的值，直接使用 this.chartData 即可 。
但是有的情況下，你的Data 里面的值并不是固定的，而是動(dòng)態(tài)獲取的，這種情況下，你會(huì)發(fā)現(xiàn) methods 中是取不到你的 Data 的，或者取到的一直是默認(rèn)值。
解決辦法：
這種情況我是使用watch處理
監(jiān)聽(tīng) Data 的值，當(dāng)它由空轉(zhuǎn)變時(shí)就會(huì)觸發(fā)，這時(shí)候就能取到了，拿到值后要做的處理方法也需要在 watch 里面執(zhí)行。
export default {
props: ['Data'],
data(){
return {
cData: []
}
},
watch: {
//正確給 Data 賦值的 方法
chartData: function(newVal,oldVal){
this.cData = newVal; //newVal即是chartData
newVa l&& this.draw(); //newVal存在的話執(zhí)行draw函數(shù)
}
},
methods: {
draw(){
//執(zhí)行其他邏輯
}
},
mounted() {
//在created、mounted這樣的生命周期, 給 this.Data賦值會(huì)失敗,錯(cuò)誤賦值方法
}
}
//總結(jié)
出現(xiàn)這種情況的原因, 因?yàn)楦附M件中要傳遞的 props 屬性 是通過(guò) 發(fā)生ajax請(qǐng)求回來(lái)的, 請(qǐng)求的這個(gè)過(guò)程是需要時(shí)間的，但是子組件的渲染要快于ajax請(qǐng)求過(guò)程，所以此時(shí) created 、 mounted 這樣的只會(huì)執(zhí)行一次的生命周期鉤子，已經(jīng)執(zhí)行了，但是 props 還沒(méi)有流進(jìn)來(lái)（子組件），所以只能拿到默認(rèn)值。
以上這篇vue data有值,但是頁(yè)面{{}} 取不到值的解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法，需要傳什么值，返回值是什么類(lèi)型一目了然，這篇文章主要介紹了Vue-cli3中使用TS語(yǔ)法示例代碼,需要的朋友可以參考下2023-02-02
Vuejs 頁(yè)面的區(qū)域化與組件封裝的實(shí)現(xiàn)
本篇文章主要介紹了Vuejs 頁(yè)面的區(qū)域化與組件封裝的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue監(jiān)聽(tīng)器簡(jiǎn)單使用及注意事項(xiàng)說(shuō)明
這篇文章主要介紹了Vue監(jiān)聽(tīng)器簡(jiǎn)單使用及注意事項(xiàng)說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
這次做項(xiàng)目的時(shí)候遇到需要切換預(yù)覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關(guān)于使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要和大家一起學(xué)習(xí)vue.js的計(jì)算屬性，分享一些計(jì)算屬性練習(xí)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
在vue中使用image-webpack-loader實(shí)例
這篇文章主要介紹了在vue中使用image-webpack-loader實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
element自定義 多文件上傳 觸發(fā)多次on-change問(wèn)題
這篇文章主要介紹了element自定義 多文件上傳 觸發(fā)多次on-change問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本文的初衷是想讓更多哎學(xué)習(xí)的人知道并了解vue模版編譯，所以文中主要以階段流程為主，不會(huì)涉及過(guò)多的底層代碼邏輯,需要的朋友可以參考一下2021-09-09
淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理
本篇文章主要介紹了淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理 ，主要使用v-model這個(gè)數(shù)據(jù)雙向綁定，有興趣的可以了解一下2017-09-09
Vue中的異步組件函數(shù)實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中的異步組件函數(shù)實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07