码迷,mamicode.com
首页 > 其他好文 > 详细

vue 父到子动态传值 子组件实时渲染

时间:2019-10-08 16:04:20      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:color   def   ons   eth   cal   this   技术   from   scree   

近期项目中需要一个功能,根据选择不同的 团队片区 id 展示不同的数据,团队id 在父组件  数据在子组件中展示。

技术图片

 

 

 

 

 

 

 根据不同的团队 动态渲染数据总览。

父组件:

 <Cards ref="getCardId"></Cards>

  

data() {
    return {
      
      params:{
        enterprises:‘‘,
      },
      
      
    };
  },

 

引入子组件
import {Cards} from "./components"

export default {
  components: {
    Cards,
  },
}

点击查询:

// 查询
    queryCallback(){
      
      // console.log(‘点击查询‘)

      // console.log(this.$refs.getCardId);

      this.$refs.getCardId.getDataScreen(this.params.enterprises)
      

    }

 

子组件:

 data() {
    return {
      // cardId:[],
      params:{
        enterpriseId:‘‘
      },
      dataScreen: {} // 数据总览
    }
  },

 

 methods: {
    getDataScreen(m ) {
     
      this.params.enterpriseId = m
     
      homeApi.getDataScreen(this.params ).then(data => {
        this.dataScreen = data
        this.cardId = []
      })
    }
  }

 

1

vue 父到子动态传值 子组件实时渲染

标签:color   def   ons   eth   cal   this   技术   from   scree   

原文地址:https://www.cnblogs.com/lpp-11-15/p/11635708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!