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

时间:2019-10-08
本文章向大家介绍vue 父到子动态传值 子组件实时渲染,主要包括vue 父到子动态传值 子组件实时渲染使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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

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