我的問題出在js引入的順序不對，導致不能正常顯示vue中的值

正確的順序應該是：

先引入vue的js--------html程式碼-----最後引入自己寫的js

補充知識：vue中子元件的created、mounted生命週期鉤子中獲取不到props中的值問題

父子元件通訊

這個很簡單，父元件中使用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 裡面的值並不是固定的，而是動態獲取的，這種情況下，你會發現 methods 中是取不到你的 Data 的，或者取到的一直是預設值。

解決辦法：

這種情況我是使用watch處理

監聽 Data 的值，當它由空轉變時就會觸發，這時候就能取到了，拿到值後要做的處理方法也需要在 watch 裡面執行。

export default {
 props: ['Data'],data(){
   return {
    cData: []
   }
  },watch: {
   //正確給 Data 賦值的 方法
   chartData: function(newVal,oldVal){
    this.cData = newVal; //newVal即是chartData
    newVa l&& this.draw(); //newVal存在的話執行draw函式
   }
  },methods: {
   draw(){
    //執行其他邏輯
   }
  },　　　　　
  mounted() {
   //在created、mounted這樣的生命週期,給 this.Data賦值會失敗,錯誤賦值方法 
  }
 }

//總結

出現這種情況的原因,因為父元件中要傳遞的 props 屬性 是通過 發生ajax請求回來的,請求的這個過程是需要時間的，但是子元件的渲染要快於ajax請求過程，所以此時 created 、 mounted 這樣的只會執行一次的生命週期鉤子，已經執行了，但是 props 還沒有流進來（子元件），所以只能拿到預設值。

以上這篇vue data有值,但是頁面{{}} 取不到值的解決就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。