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

Posted on 2019-10-08 15:35  嗷呜~  阅读(3549)  评论(0)  编辑  收藏  举报

近期项目中需要一个功能，根据选择不同的 团队片区 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