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

vue 父到子动态传值 子组件实时渲染的更多相关文章

  1. 父窗口window.showModalDialog传值 子窗口window.returnValue返回值

    父窗口打开子窗口页面: var fatherWindow = document.all.dealReason;//想传的值 win = window.showModalDialog(strUrl, f ...

  2. vue父组件向子组件动态传值的两种方法

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空 ...

  3. vue 父组件给子组件传值,子组件给父组件传值

    父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...

  4. Vue 父组件传值到子组件

    vue 父组件给子组件传值中 这里的AccessList就是子组件 如果 是静态传值的话直接  msg="xxx"就好 这里动态取值的话就  :msg=xxxxx ________ ...

  5. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  6. Vue父组件像子组件传值--自定义属性

    这里有个注意的地方,Vue实例控制app DIV 大组件,我们在div中天加小组件的时候,传值需要创建自定义的属性 之后在通过props:[‘属性名’] 来把父元素data中的数据传递给子组件 < ...

  7. vue父组件异步获取动态数据传递给子组件获取不到值

    原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...

  8. Vue等待父组件异步请求回数据'后'传值子组件

    问题: 让子组件在父组件有哪个数据的时候再渲染, 解决方案: 可以在父组件上加一个判断条件, 举例说明: <a-component :opt="opt" v-if=" ...

  9. vue父组件传参给子组件

    其实组件之间传参有很多种方法: 1.通过本地存储 2.使用vuex状态管理 今天记录一下第三种方法 1.首页我们先创建一个项目(创建项目自行百度) 2.打开项目,在components文件夹下新建一个 ...

随机推荐

  1. Win10桌面图标显示不正常变成了白色

    开机不知道什么原因,windows 10 桌面图标全部变成了白色,软件是可以点击正常打开使用,但是看着特别不爽.今天就告诉大家一种办法,解决这种问题. 解决步骤 1.在桌面右键新建 "文本文 ...

  2. springCloud配置(microServiceProvider)

    server: port: 8001 mybatis: config-location: classpath:mybatis/mybatis.cfg.xml # mybatis配置文件所在路径 typ ...

  3. NVMe SSD是什么?

    https://blog.51cto.com/alanwu/1766945 一直对闪存存储关注的朋友对NVMe SSD一定非常熟悉,NVMe SSD是现如今性能最好的存储盘.这种高性能盘在互联网领域已 ...

  4. NRF24L01学习

    一.工作模式 PWR_UP和PRIM_RX在寄存器0x00中的第0位和第1位. 待机模式I:只是使用晶振工作,CE=0时是拉低? 待机模式II:部分时钟缓冲器处在工作模式.TX FIFO为空并且CE为 ...

  5. Wireshark协议分析1

    一.界面简介   1.抓包工具栏 2.文件工具栏 3.包定位工具栏 4.颜色以及滚动界面工具栏 5.数据包列表字体定义工具栏 6.首选项工具栏 二.过滤规则 1.过滤 IP ip.src eq 192 ...

  6. redis安装-1

    redis安装 cd /opt/tools/ #包目录 tar -xf redis-.tar.gz cd redis- make#centos7安装   make MALLOC=libc && ...

  7. Android数字签名的学习(转)

    转载地址:http://www.cnblogs.com/feisky/archive/2010/01/17/1650076.html 在Android系统中,所有安装到系统的应用程序都必有一个数字证书 ...

  8. ROM、PROM、EPROM、EEPROM、Flash ROM分别指什么?

    ROM指的是“只读存储器”,即Read-Only Memory.这是一种线路最简单半导体电路,通过掩模工艺, 一次性制 造,其中的代码与数据将永久保存(除非坏掉),不能进行修改.这玩意一般在大批量生产 ...

  9. STM32 系统架构

    这里所讲的 STM32 系统架构主要针对的 STM32F103 这些非互联型芯片 STM32 主系统主要由四个驱动单元和四个被动单元构成. 四个驱动单元是: 内核 DCode 总线; 系统总线;通用  ...

  10. HTML5: HTML5 应用程序缓存

    ylbtech-HTML5: HTML5 应用程序缓存 1.返回顶部 1. HTML5 应用程序缓存 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线 ...