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文件夹下新建一个 ...
随机推荐
- python常用技巧 — 杂
目录: 1. 找到字符串中的所有数字(python find digits in string) 2. python 生成连续的浮点数(如 0.1, 0.2, 0.3, 0.4, ... , 0.9) ...
- iSkysoft iMedia Converter Deluxe for Mac的使用方法
我们电脑上的播放器大多数的播放格式都比较少,所以在播放其它格式的时候容易出错,不能兼容其它的视频格式.今天小编要给大家推荐一种软件,iSkysoft iMedia Converter Deluxe就是 ...
- &与&&、|与||的区别
&和&& 相同之处: &和&&都表示:符号两端必须同时为真,最后的结果才为真:其中一端为假,则最后的结果为假 不同之处: &:左端为假,还需要继 ...
- ubuntu安装samba
1, sudo apt-get install samba sudo apt-get install smbclient 2, vi /etc/samba/smb.conf 在最后加字段(为可读可 ...
- cf round#598 CDEF
C:模拟:未跳到目的地之前先贪心放板子,能到达目的地后紧贴着放板子 先判能不能跳到目的地,能跳到再考虑是否需要将后面的板子往前移动 #include<bits/stdc++.h> usin ...
- django更换默认数据库sqlite3为pymsql后出现Keyerror:255的解决办法----升级PyMySQL
一.更换数据库的办法: 1.安装PyMySQL 2.修改project目录同名文件下的settings.py:DATABASES = { 'default': { # 'ENGINE': 'djang ...
- 用 Flask 来写个轻博客 (7) — (M)VC_models 的关系(many to many)
目录 目录 前文列表 扩展阅读 前期准备 多对多 使用样例 一直在使用的 session 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask 来写个轻博客 (2) - Hel ...
- 32. 持续集成简介及JDK、Tomcat、Jenkins环境搭建
持续集成简介 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验 ...
- 74HC AHCT LS LV ABT区别
1. 含义 2. 74AHC 74AHCT 74LV 74LS 2.1 解释 AHC与AHCT均是先进的高速的CMOS器件,但是供电电压范围不同,输入的逻辑电平也不同. LV是低压版,当自身供电电压为 ...
- activiti7查询历史数据
package com.zcc.activiti02; import org.activiti.engine.HistoryService;import org.activiti.engine.Pro ...