近期项目中需要一个功能,根据选择不同的 团队片区 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. HashMap高并发下存在的问题

    原文链接:https://blog.csdn.net/bjwfm2011/article/details/81076736 1.什么是HashMap? HashMap底层原理 HashMap是存储键值 ...

  2. 学习java设计模式有用吗?懂这六个原则,编程更轻松

    学习java设计模式有用吗?懂这六个原则,编程更轻松 1.开闭原则(Open Close Principle) 开闭原则就是说对扩展开放,对修改关闭.在程序需要进行拓展的时候,不能去修改原有的代码,实 ...

  3. U200-SNMP

    U200配置snmp snmp-agent sys-info version v2c snmp-agent community read jkzh snmp-agent trap enable snm ...

  4. SPI总线介绍和裸机编程分析

    一.SPI总线结构 SPI(Serial Peripheral Interface)串行外设接口,是一种高速的,全双工,同步的通信总线.采用主从模式(Master Slave)架构,支持多个slave ...

  5. hdu 4609 3-idiots(FFT+去重处理)

    3-idiots Problem Description King OMeGa catched three men who had been streaking in the street. Look ...

  6. 团队冲刺DAY3

    DESUtil.java是包含加密解密抽象类的Java文件 DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法,1977年被美国联邦政府的国家标准 ...

  7. struts2 paramsPrepareParamsStack拦截器简化代码(源码分析)

    目录 一.在讲 paramsPrepareParamsStack 之前,先看一个增删改查的例子. 1. Dao.java准备数据和提供增删改查 2. Employee.java 为model 3. E ...

  8. 8086汇编和Win32汇编

    8086汇编是指在某环境下汇编编译产生的程序,用机器去执行每条指令的长度为16位(可小于16),如DOS操作系统:WIN32汇编是32位环境下的汇编,如Windows(Windows也有64位的,XP ...

  9. seleniumIDE command命令

    语法组成要素:command.target.value. command命令 三大类型:(action.Accessor.assertion)   操作  存储  断言 操作类型——Action 浏览 ...

  10. 调整WebBrowser的默认浏览器内核版本

    原文出自:https://my.oschina.net/Tsybius2014/blog/492107 注:这个是写.net控件,其实delphi是一样的.作者已经写的比较全面了,我只是做了一点修改 ...