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文件夹下新建一个 ...
随机推荐
- git注意事项
1,在github中新建空的工程,第一次提交代码的时候 使用命令 $ git push -u origin master -f 后面就直接push就行了
- 深入java虚拟机学习笔记(一)
学习java学到最后都要很熟悉jvm,懂得了java的运行机制,查找问题就会很快了,一般我们都是会用,还到不了精通的地步,虽说我也是个多年的java工程师,但也没有很好的掌握jvm,最近换了一 ...
- element-ui 复选框,实现点击表格当前行选中或取消
背景: 1.表格结构绑定事件 <el-table v-loading="StepsListLoading" :data="StepsListData" b ...
- K-th Closest Distance
题目链接 题意:n个数,q次查询,查询[l , r] 内, | a[i] - p | 第k大的数 思路:主席树维护下权值大小,二分答案,查询区间[p - mid, p + mid] 的个数 #incl ...
- Mac启动时:boot task failed:fsck-safe处理办法
mac系统启动到一半,然后突然关机,查看启动信息发现:boot task failed:fsck-safe 处理方法,clover启动的时候按空格,然后选择sigle mode. 进入使用命令:fsc ...
- gradle 排除jar
排除fastjson的包,其他同理compile('com.qq.sdk:core:2.0.3') { exclude group: 'com.alibaba'}
- WebX.0:Web1.0
ylbtech-WebX.0:Web1.0 web1.0时代是一个群雄并起,逐鹿网络的时代,虽然各个网站采用的手段和方法不同,但第一代互联网有诸多共同的特征,表现在技术创新主导模式.基于点击流量的盈利 ...
- python学习笔记:接口开发——flask Demo实例
举例1,返回当前时间接口 ''' 初始化:所有的Flask都必须创建程序实例, web服务器使用wsgi协议,把客户端所有的请求都转发给这个程序实例 程序实例是Flask的对象,一般情况下用如下方法实 ...
- 代码质量管理-Sonar
1.Sonar 摘要 Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具. 与持续集成工具(例如 Hudson/Jenkin ...
- apache2.2.25+tomcat7.0.47集群方案
因为公司项目在线人数的增加,随着现在硬件成本越来越低,大多数的生产环境内存大多都已经达到 16G,尤其最新的阿里云,客户的机器都是配置超高的java主机,但是Java的运行环境,内存使用有限 ,这样就 ...