vue的动态组件 !is的使用


<template>
<div class="app-container" v-loading="loading">
  <div>
    <div class="baseSet">
      <el-menu :default-active="currentView"  mode="horizontal" @select="handleSelect">
      <el-menu-item v-for="(  Item,Index) in tabList" :key="Index" :index="Item.label">{{Item.name}}</el-menu-item>
    </el-menu>
    </div>
    <div>
      <!--动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换。-->
      <div :is="currentView"></div>
    </div>
  </div>
</div>
</template>
<script>
  // 导入子组件
  import basecardSet from './cardBaseSet'
  import basememberSet from './memberInfoSet'
  import basestoreSet from './storeCashierSet'
  export default {
    components: {
      basecardSet,
      basememberSet,
      basestoreSet
    },
    watch: {
      // currentView (val) {
      //   console.log(val)
      // }
    },
    data () {
      return {
        tabList: [{
          name: '基础设置',
          label: 'basecardSet'
        }, {
          name: '门店收银',
          label: 'basestoreSet'
        }, {
          name: '会员资料',
          label: 'basememberSet'
        }],
        currentView: 'basecardSet'
      }
    },
    created () {
      this.currentView = this.$route.query.type || 'basecardSet'
    },
    methods: {
      handleSelect (key, keyPath) {
        this.currentView = key
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

文章作者:   leader755
版权声明:   本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !
评论 (留下邮箱后可以快速收到回复)
 上一篇
服务器的安全组策略 服务器的安全组策略
## 开放全部安全组:(不安全)主要是添加 2 条规则, 1.入方向开放全部端口 2.出方向开放全部端口添加上面 2 条规则后,安全组就全部放开了,这个时候你就不会再收到任何影响了 开放特定端口 有的朋友觉得安全组挺好用,那么你就可以将其作
2020-11-03
下一篇 
input输入框的限制 input输入框的限制
原生输入对复制粘贴也会生效,但是 vue 中的双向绑定 v-model 会出现,实际值并没有改变而使显示值变化了。1.文本框只能输入数字<input onkeyup="this.value=this.value.replace(/\D
  目录