vue 动态组件,传递参数
<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 动态组件,传递参数的更多相关文章
- vue父子组件传递参数之props
vue中父组件通过props传递数据给子组件, props有两种传递方式 1.props:['msg']2.props: { msg:{ type:String, default:"&quo ...
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue-父组件传递参数到子组件
案例: 父组件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{ ...
- vue子组件向父组件传递参数的基本方式
子组件: this.$emit('transferUrl', this.picUrl) 父组件: 引入子组件<pics @transferUrl="gettransferUrl&quo ...
- Vue动态组件&异步组件
在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...
- vue 父子组件传递数据
单向数据流: 数据从父级组件传递给子组件,只能单向绑定. 子组件内部不能直接修改从父级传递过来的数据. 解决方法: 可以使用data将父组件传递过来的数据拷贝一份存放起来,再修改拷贝的数据就可以了 / ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue父组件传递异步获取的数据给子组件
问题场景: 当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值? 在父组件中: 首先在data()中定义data_detail为空: data(){ data_detail: ...
- vue动态组件切换(选项卡)
vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...
随机推荐
- ASE2019 model组 事后诸葛亮会议记录
诸葛亮文档 设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 传统编程教育模式下,初学者(主要是刚刚接触编程的学生)往往依靠老师与助教的课堂教学,由 ...
- C#面向对象(五大基本原则 )
五大原则 单一职责原则(SRP)开放封闭原则(OCP) 里氏替换原则(LSP) 依赖倒置原则(DIP) 接口隔离原则(ISP) 一.单一职责原则SRP(Single Responsibility P ...
- vue 之img的src是动态渲染时(即 :src=' ' )不显示 踩坑
问题: <img :src="item.image ? `../../assets/image/${item.image}` : ''" alt="image&qu ...
- STM32L15x——ADC采集DMA数据只第一次正确(已解决)
前提:我用的芯片是STM32L系列,可能对其它STM32系列不完全适用,仅供参考! 一.问题描述 我在使用DMA方式读取单ADC单通道采集的数据时,发现只能正确的采集一次数据,后来的就一直与第一次的相 ...
- IIS教程:因权限问题被拒绝访问的解决方案
https://blog.csdn.net/a497785609/article/details/49952281 写了一个类IISAdmin,负责建立.设置.删除虚拟目录,发现在web中调用,遇到权 ...
- Educational Codeforces Round 40 G. Castle Defense (二分+滑动数组+greedy)
G. Castle Defense time limit per test 1.5 seconds memory limit per test 256 megabytes input standard ...
- ArcGIS水文分析实战教程(15)库容和淹没区计算
库容和淹没区计算 的基本流程 要计算库容就必须先计算出该集水区面积,并且通过不同的水位计算出淹没区,并利用淹没区去裁剪DEM数据,将水面与下垫面的体积计算出来,这就是水库的库容.由于有了前面的基础,这 ...
- Linux部署Django:报错 nohup: ignoring input and appending output to ‘nohup.out’
一.部署 Django 到远程 Linux 服务器 利用 xshell 通过 ssh 连接到 Linux服务器,常规的启动命令是 python3 manage.py runserver 但是,关闭 x ...
- solrcloud2
分片的原因 由于底层Lucene的限制,每个solr索引中包含的文档数不能超过231个,大约是21亿个.但是solr分片一般不是基于这个的原因,因为一般没有到这个峰值的之后,solr的各中性能问题就暴 ...
- Java 正则表达式获取两个字符中间的内容
利用 正则表达式 获取两个字符串中间的值 直接上代码吧,不是很难. public static void main(String[] args) { // 内容 String value = &quo ...