<template>
<div class="top">
<div class='nav'>
<ul class='navHader'>
<li @click="current='Sunyi'" :class="{active:current=='Sunyi'}">损益完成情况分析表</li>
<li @click="current='Caiwu'" :class="{active:current=='Caiwu'}">财务快报资产分析表</li>
<li @click="current='Jingying'" :class="{active:current=='Jingying'}">经营指标完成情况分析表</li>
</ul>
<Menus></Menus>
</div>
<keep-alive>
<component :is="current" :callbackdata="callbackdata"></component>
</keep-alive>
</div>
</template>
<script>

  import Menus from "./Button.vue"
import Sunyi from "./Tables/Sunyi.vue"
import Jingying from "./Tables/Jingying.vue"
import Caiwu from "./Tables/Caiwu.vue" export default {
data() {
return {
current: 'Sunyi',
navs: [
'损益完成情况分析表',
'财务快报资产分析表',
'经营指标完成情况分析表',
],
callbackdata:{},//返回数据
}
},
mounted() {
this.toggleSwitch(this.current)
},
methods: {
toggleSwitch(parameter) {
const self = this;
let this_toggle = parameter; switch (this_toggle) {
case 'Sunyi':
self.toggleDatainit('pl');
break;
case 'Caiwu':
self.toggleDatainit('bs');
break;
case 'Jingying':
self.toggleDatainit('t1');
break;
}
},
toggleDatainit(talbel_url) {
const self = this;
self.$http.get('getInitTable/init/'+talbel_url).then(res => {
if(res.data.status == 2000){
console.log(res.data);
self.callbackdata = res;
}
}).then(error => {
});
},
},
components: {
Menus,
Sunyi,
Caiwu,
Jingying
},
watch:{
current(newV){
this.toggleSwitch(newV);
}
}
} </script>

在子组件中接收参数

<script>
import Tools from '../../tools/tools' export default {
data() {
return {
HT: new Tools(),// 实例一个对象
HTobjData: '',// HT的一个大集合
}
},
props: {
callbackdata: {
type: Object,
default: {}
}
},
mounted() { },
methods: {
init(callbackdata) {
const self = this;
self.HTobjData = self.HT.init(callbackdata, self, Handsontable);
}
},
components: {}, watch: {
callbackdata(newV) {
this.init(newV);
}
} } </script>

vue 动态组件,传递参数的更多相关文章

  1. vue父子组件传递参数之props

    vue中父组件通过props传递数据给子组件, props有两种传递方式 1.props:['msg']2.props: { msg:{ type:String, default:"&quo ...

  2. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  3. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  4. vue-父组件传递参数到子组件

    案例: 父组件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{ ...

  5. vue子组件向父组件传递参数的基本方式

    子组件: this.$emit('transferUrl', this.picUrl) 父组件: 引入子组件<pics @transferUrl="gettransferUrl&quo ...

  6. Vue动态组件&异步组件

    在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...

  7. vue 父子组件传递数据

    单向数据流: 数据从父级组件传递给子组件,只能单向绑定. 子组件内部不能直接修改从父级传递过来的数据. 解决方法: 可以使用data将父组件传递过来的数据拷贝一份存放起来,再修改拷贝的数据就可以了 / ...

  8. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  9. Vue父组件传递异步获取的数据给子组件

    问题场景: 当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值? 在父组件中: 首先在data()中定义data_detail为空: data(){ data_detail: ...

  10. vue动态组件切换(选项卡)

    vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...

随机推荐

  1. NORDIC 协议栈下使用硬件定时器

    在使能蓝牙协议栈后,RTC0.TIMER0被蓝牙协议栈使用,RTC1被软件定时器使用,所以才程序中使用定时器的时候需要避开.

  2. 屏蔽恶意IP

    #!/bin/bash cat /var/log/secure | grep Failed | awk -F " " '{print $11}'| sort| uniq -c| a ...

  3. 【TCP】连接管理

    TCP连接管理   本节将介绍一条TCP连接是如何建立和拆除的.此处假设客户机A上面的一个进程想要和服务 器B上的一个进程建立一条TCP连接.本文前面介绍的是比较正常的连接和拆除,特殊的会在后面介绍. ...

  4. java_八大数据类型

    一.整型 1.byte  1个字节(8位--一个字节占8位)-128~127 2.short  2个字节  -32768~32767 3.int      4个字节(常用) 4.long   8个字节 ...

  5. java——从.net再学习java

    到底从java中学到了什么? 1,java是由sun公司发明的,sun希望制定一些标准,具体的实现交给具体的厂商来自己实现: 2,java是开源的,第三方做了很多自己的一些组件实现,比如: 很多时候, ...

  6. 解决Python中出现的问题: “You are using pip version 9.0.1, however version 19.2.3 is available. You should consider upgrading via the 'python -m pip install --upgrade pip' command.”

    1. 一开始我在使用Pycharm时,导入numpy库,发现导入错误: Non-zero exit code (1) 2. 于是我通过更新的方法来解决,哪知道在更新的时候也出现了错误,错误如下图: 这 ...

  7. 《黑白团团队》第九次团队作业:Beta冲刺第三天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第一天 日期:2019/6/24 1.1 ...

  8. 【转】深入理解Spring的两大特征(IOC和AOP)

    原文链接:https://blog.csdn.net/gloomy_114/article/details/68946881 众所周知,Spring的核心特性就是IOC和AOP,IOC(Inversi ...

  9. Codeforces Round #591 (Div. 2, based on Technocup 2020 Elimination Round 1) C. Save the Nature

    链接: https://codeforces.com/contest/1241/problem/C 题意: You are an environmental activist at heart but ...

  10. 4、docker镜像:花卷结构、commit镜像

    1.是什么 docker images 镜像是一种轻量级.可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件,它包含运行某个软件所需的所有内容,包括代码.运行时.库.环境变量和配置文件. ...