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

Posted 2023-01-04 lpp-11-15

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