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