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
vue 父到子动态传值 子组件实时渲染的更多相关文章
- 父窗口window.showModalDialog传值 子窗口window.returnValue返回值
父窗口打开子窗口页面: var fatherWindow = document.all.dealReason;//想传的值 win = window.showModalDialog(strUrl, f ...
- vue父组件向子组件动态传值的两种方法
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片,因为有时候获取到的会是空 ...
- vue 父组件给子组件传值,子组件给父组件传值
父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...
- Vue 父组件传值到子组件
vue 父组件给子组件传值中 这里的AccessList就是子组件 如果 是静态传值的话直接 msg="xxx"就好 这里动态取值的话就 :msg=xxxxx ________ ...
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- Vue父组件像子组件传值--自定义属性
这里有个注意的地方,Vue实例控制app DIV 大组件,我们在div中天加小组件的时候,传值需要创建自定义的属性 之后在通过props:[‘属性名’] 来把父元素data中的数据传递给子组件 < ...
- vue父组件异步获取动态数据传递给子组件获取不到值
原理: 在父组件中使用axios获取异步数据传给子组件,但是发现子组件在渲染的时候并没有数据,在created里面打印也是空的,结果发现一开始子组件绑定的数据是空的,在请求数据没有返回数据时,子组件就 ...
- Vue等待父组件异步请求回数据'后'传值子组件
问题: 让子组件在父组件有哪个数据的时候再渲染, 解决方案: 可以在父组件上加一个判断条件, 举例说明: <a-component :opt="opt" v-if=" ...
- vue父组件传参给子组件
其实组件之间传参有很多种方法: 1.通过本地存储 2.使用vuex状态管理 今天记录一下第三种方法 1.首页我们先创建一个项目(创建项目自行百度) 2.打开项目,在components文件夹下新建一个 ...
随机推荐
- HashMap高并发下存在的问题
原文链接:https://blog.csdn.net/bjwfm2011/article/details/81076736 1.什么是HashMap? HashMap底层原理 HashMap是存储键值 ...
- 学习java设计模式有用吗?懂这六个原则,编程更轻松
学习java设计模式有用吗?懂这六个原则,编程更轻松 1.开闭原则(Open Close Principle) 开闭原则就是说对扩展开放,对修改关闭.在程序需要进行拓展的时候,不能去修改原有的代码,实 ...
- U200-SNMP
U200配置snmp snmp-agent sys-info version v2c snmp-agent community read jkzh snmp-agent trap enable snm ...
- SPI总线介绍和裸机编程分析
一.SPI总线结构 SPI(Serial Peripheral Interface)串行外设接口,是一种高速的,全双工,同步的通信总线.采用主从模式(Master Slave)架构,支持多个slave ...
- hdu 4609 3-idiots(FFT+去重处理)
3-idiots Problem Description King OMeGa catched three men who had been streaking in the street. Look ...
- 团队冲刺DAY3
DESUtil.java是包含加密解密抽象类的Java文件 DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法,1977年被美国联邦政府的国家标准 ...
- struts2 paramsPrepareParamsStack拦截器简化代码(源码分析)
目录 一.在讲 paramsPrepareParamsStack 之前,先看一个增删改查的例子. 1. Dao.java准备数据和提供增删改查 2. Employee.java 为model 3. E ...
- 8086汇编和Win32汇编
8086汇编是指在某环境下汇编编译产生的程序,用机器去执行每条指令的长度为16位(可小于16),如DOS操作系统:WIN32汇编是32位环境下的汇编,如Windows(Windows也有64位的,XP ...
- seleniumIDE command命令
语法组成要素:command.target.value. command命令 三大类型:(action.Accessor.assertion) 操作 存储 断言 操作类型——Action 浏览 ...
- 调整WebBrowser的默认浏览器内核版本
原文出自:https://my.oschina.net/Tsybius2014/blog/492107 注:这个是写.net控件,其实delphi是一样的.作者已经写的比较全面了,我只是做了一点修改 ...