亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue中子組件的methods中獲取到props中的值方法

 更新時間:2018年08月27日 11:21:51   作者:FarmanKKK  
今天小編就為大家分享一篇vue中子組件的methods中獲取到props中的值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

父子組件通信

這個官網(wǎng)很清楚,也很簡單,父組件中使用v-bind綁定傳送,子組件使用props接收即可

例如:

父組件中

<template>
  <div>
    <head-top></head-top>
    <section class="data_section">
      <header class="chart-title">數(shù)據(jù)統(tǒng)計</header>
      <el-row :gutter="20" class="chart-head">
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head blue-head">統(tǒng)計:</div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">銷售數(shù)量 <span>{{number}}</span></div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">銷售金額 <span>{{amount}}</span></div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">利潤統(tǒng)計 <span>{{profits}}</span></div></el-col>
      </el-row>
    </section>
    <chart :chartData="chartData"></chart>
  </div>
</template>

<script>
  data(){
      return {
        number: null,
        amount: null,
        profits: null,
        chartData: [10,10,10]
      }
    },
</script>

子組件中

export default {
  props: ['chartData']
}

這種情況下,子組件的methods中想要取到props中的值,直接使用this.chartData即可

但是有寫情況下,你的chartData里面的值并不是固定的,而是動態(tài)獲取的,這種情況下,你會發(fā)現(xiàn)methods中是取不到你的chartData的,或者取到的一直是默認值

比如下面這個情況

父組件中

<script>
  data(){
      return {
        number: null,
        amount: null,
        profits: null,
        chartData: []
      }
    },
    mounted(){
      this.getStatistics();
    },
    methods: {
      //獲取統(tǒng)計數(shù)據(jù)
      getStatistics(){
        console.log('獲取統(tǒng)計數(shù)據(jù)')
        axios.post(api,{

        }).then((res) => {
          this.number = res.data.domain.list[0].number;
          this.amount = res.data.domain.list[0].amount;
          this.profits = res.data.domain.list[0].profits;
          this.chartData = [this.number,this.amount,this.profits];
        }).catch((err) => {
          console.log(err);
        })
      },
    },
</script>

此時子組件的methods中使用this.chartData會發(fā)現(xiàn)是不存在的(因為為空了)

這情況我是使用watch處理

解決方法如下:

使用watch

props: ['chartData'],
    data(){
      return {
        cData: []
      }
    },
    watch: {
      chartData: function(newVal,oldVal){
        this.cData = newVal; //newVal即是chartData
        this.drawChart();
      }
    },

監(jiān)聽chartData的值,當它由空轉變時就會觸發(fā),這時候就能取到了,拿到值后要做的處理方法也需要在watch里面執(zhí)行

以上這篇vue中子組件的methods中獲取到props中的值方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • 基于Vue實現(xiàn)文件拖拽上傳功能

    基于Vue實現(xiàn)文件拖拽上傳功能

    文件拖拽上傳功能現(xiàn)在已經隨處可見,大家應該都用過了吧,那么它具體是怎么實現(xiàn)的大家有去了解過嗎,今天我們一起來實現(xiàn)一下這個功能,并封裝一個拖拽上傳組件吧
    2024-03-03
  • vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式

    vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式

    這篇文章主要介紹了vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue?elementUi中的tabs標簽頁使用教程

    vue?elementUi中的tabs標簽頁使用教程

    Tabs 組件提供了選項卡功能,默認選中第一個標簽頁,下面這篇文章主要給大家介紹了關于vue?elementUi中的tabs標簽頁使用的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2023-03-03
  • vue中的生命周期及鉤子函數(shù)

    vue中的生命周期及鉤子函數(shù)

    這篇文章主要介紹了vue中的生命周期及鉤子函數(shù),Vue?實例有一個完整的生命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載?Dom、渲染,下面文章詳細介紹,需要的朋友可以參考一下
    2021-12-12
  • Vue項目中打包優(yōu)化的四種方法詳解

    Vue項目中打包優(yōu)化的四種方法詳解

    最近入職了新公司,接手了一個新拆分出來的Vue項目,針對該項目做了個打包優(yōu)化,下面這篇文章主要給大家介紹了關于Vue項目中打包優(yōu)化的四種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • vue項目使用js監(jiān)聽瀏覽器關閉、刷新及后退事件的方法

    vue項目使用js監(jiān)聽瀏覽器關閉、刷新及后退事件的方法

    這篇文章主要給大家介紹了關于vue項目使用js監(jiān)聽瀏覽器關閉、刷新及后退事件的相關資料,文中通過代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09
  • 通用vue組件化登錄頁面實例代碼

    通用vue組件化登錄頁面實例代碼

    這篇文章主要給大家介紹了關于通用vue組件化登錄頁面的相關資料,文中通過圖文以及實例代碼將解決的辦法介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下
    2023-08-08
  • Element Alert警告的具體使用方法

    Element Alert警告的具體使用方法

    這篇文章主要介紹了Element Alert警告的具體使用方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • 同步cookie插件原理及實現(xiàn)示例

    同步cookie插件原理及實現(xiàn)示例

    這篇文章主要為大家介紹了同步cookie插件原理及實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • Vue自定義元素身上的右鍵事件問題

    Vue自定義元素身上的右鍵事件問題

    這篇文章主要介紹了Vue自定義元素身上的右鍵事件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評論