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