父子組件通信
目前成都創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、鎮(zhèn)坪網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
這個(gè)官網(wǎng)很清楚,也很簡(jiǎn)單,父組件中使用v-bind綁定傳送,子組件使用props接收即可
例如:
父組件中
<template> <div> <head-top></head-top> <section class="data_section"> <header class="chart-title">數(shù)據(jù)統(tǒng)計(jì)</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)計(jì):</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">利潤(rùn)統(tǒng)計(jì) <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即可
但是有寫(xiě)情況下,你的chartData里面的值并不是固定的,而是動(dòng)態(tài)獲取的,這種情況下,你會(huì)發(fā)現(xiàn)methods中是取不到你的chartData的,或者取到的一直是默認(rèn)值
比如下面這個(gè)情況
父組件中
<script> data(){ return { number: null, amount: null, profits: null, chartData: [] } }, mounted(){ this.getStatistics(); }, methods: { //獲取統(tǒng)計(jì)數(shù)據(jù) getStatistics(){ console.log('獲取統(tǒng)計(jì)數(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>
此時(shí)子組件的methods中使用this.chartData會(huì)發(fā)現(xiàn)是不存在的(因?yàn)闉榭樟?
這情況我是使用watch處理
解決方法如下:
使用watch
props: ['chartData'], data(){ return { cData: [] } }, watch: { chartData: function(newVal,oldVal){ this.cData = newVal; //newVal即是chartData this.drawChart(); } },
監(jiān)聽(tīng)chartData的值,當(dāng)它由空轉(zhuǎn)變時(shí)就會(huì)觸發(fā),這時(shí)候就能取到了,拿到值后要做的處理方法也需要在watch里面執(zhí)行
以上這篇vue中子組件的methods中獲取到props中的值方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持創(chuàng)新互聯(lián)。
本文標(biāo)題:vue中子組件的methods中獲取到props中的值方法
網(wǎng)站地址:http://muchs.cn/article24/ghjoje.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、網(wǎng)站導(dǎo)航、動(dòng)態(tài)網(wǎng)站、做網(wǎng)站、App開(kāi)發(fā)、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
營(yíng)銷型網(wǎng)站建設(shè)知識(shí)