网站建设主页_互联网建设_小程序搭建_竹子建站_建站软件
当前位置:建站首页 > 新闻资讯 > 公司新闻 >

vue中子部件的methods中获得到props中的值方式

发表日期:2021-04-07 03:24文章编辑:jianzhan浏览次数: 标签:    

父子俩部件通讯

这一官方网站很清晰,也非常简单,父部件中应用v-bind关联传输,子部件应用props接受就可以

比如:

父部件中

 template 
 div 
 head-top /head-top 
 section 
 header 数据信息统计分析 /header 
 el-row :gutter="20" 
 el-col :xs="24" :sm="12" :md="6" :lg="6" div 统计分析: /div /el-col 
 el-col :xs="24" :sm="12" :md="6" :lg="6" div 市场销售总数 span {{number}} /span /div /el-col 
 el-col :xs="24" :sm="12" :md="6" :lg="6" div 市场销售额度 span {{amount}} /span /div /el-col 
 el-col :xs="24" :sm="12" :md="6" :lg="6" div 盈利统计分析 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里边的值其实不是固定不动的,只是动态性获得的,这类状况下,你能发觉methods中是取不上你的chartData的,或是取到的一直是默认设置值

例如下边这一状况

父部件中

 script 
 data(){
 return {
 number: null,
 amount: null,
 profits: null,
 chartData: []
 mounted(){
 this.getStatistics();
 methods: {
 //获得统计分析数据信息
 getStatistics(){
 console.log('获得统计分析数据信息')
 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会发觉不是存有的(由于为空了)

这状况我是应用watch解决

处理方式以下:

应用watch

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

监视chartData的值,当它由空变化时便会开启,这时候候就可以取来到,取得值后应做的解决方式也必须在watch里边实行

之上这篇vue中子部件的methods中获得到props中的值方式便是网编共享给大伙儿的所有內容了,期待能给大伙儿一个参照,也期待大伙儿多多的适用诺心互联网。

相关新闻

餐饮小程序有哪些特点_Vue+SpringBoot开发V部落博客

Vue+SpringBoot开发设计V部族blog管理方法服务平台 文章投稿:mrr V部族是一个要用户blog管理...

日期:2021-01-11 浏览次数:115