zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    CSS 实现隐藏滚动条同时又可以滚动
    在vue项目中的axios使用配置记录
    QS:vue中qs的使用
    Electron 无边框窗口最大化最小化关闭功能
    CSS样式表能否控制文字禁止选择,复制, 焦点
    yarn 在Vue框架中的常用命令
    Vue 实现左边导航栏且右边显示具体内容(element-ui)
    Vuex 存储||获取后台接口数据
    软件工程第二周开课介绍
    返回一个整数数组中最大子数组的和 (非环状 和环状)
  • 原文地址:https://www.cnblogs.com/xiaomili/p/7867013.html
Copyright © 2011-2022 走看看