vue入门记录

1. 循环一个标签v-for

普通：

 <el-tabs v-model="activeName" @tab-click="handleClick">
   <el-tab-pane label="hive库" name="0"> <DbList v-if="activeName == '0'" /> </el-tab-pane>
   <el-tab-pane label="hive表" name="1"> <TblList v-if="activeName == '1'" /> </el-tab-pane>
</el-tabs>                

使用v-for

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane v-for="item in datas" :key="item.name" :label="item.label" :name=item.name> <DbList v-if="activeName == item.name" /> </el-tab-pane>
</el-tabs>

  ...
  export default {

  name: 'DbTbl',
  data () {
    return {
      datas: [
        {
          'label': 'Hive库',
          'name': '0'
        },
        {
          'label': 'Hive表',
          'name': '1'
        }
      ]
    }
  },

其中，datas是返回的数据，label和name加: ,双向绑定值

---

2. this.$route和this.$router

注意：$不能少，没有$将视为定义的普通变量
router 是全局的，如history等查询
route是局部的

 console.log(this.$route)
 console.log(this.$router)

大神用的tab页跳转方法：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane v-for="item in datas" :key="item.name" :name="item.name">
      <el-tooltip slot="label" :content='item.tips' placement='top-end' v-if="item.tips">
        <span>{{ item.label }}</span>
      </el-tooltip>
      <span slot="label" class='tabname' v-else>
        {{ item.label }}
      </span>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
/*
  * router ->上级路由
  * datas -> 数据渲染 例如：[{ label:this.$t('Member_management'), name: 'member' }]
  * query -> 子携带参数 例如：{ type: 1}
  * */
  export default {
    name: 'DdTabmenu',
    props: ['router', 'datas', 'query'], // eslint-disable-line
    data () {
      return {
        activeName: ''
      }
    },

    mounted () {
      if (this.datas.length > 0) {
        this.activeName = this.datas[0].name
      }
      this.getActive()
    },

    watch: {
      '$route.path' (val) {
        this.getActive()
      }
    },

    methods: {
      handleClick (tab) {
        const url = this.router + tab.name
        this.$router.push({ path: url, query: this.query })
      },

      getActive () {
        const path = this.$route.path

        for (var p in this.datas) {
          const regexp = this.router + this.datas[p].name
          const reg = new RegExp(regexp)
          if (reg.test(path)) {
            this.activeName = this.datas[p].name
            break
          }
        }
      }

    }
  }
</script>

<style scoped>
.box {
  padding: 10px;
}

.tabname {
  font-size: 14px;
}
</style>

而我根据$route拼接出来的方法：

<template>
  <div class="db-wrapper">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="item in datas" :key="item.url" :label="item.label" :name="item.name"> <DbList v-if="activeName == item.name" /> </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {

  name: 'DbTbl',
  data () {
    return {
      thisUrl: '',
      datas: [
        {
          'label': 'Hive库',
          'name': '0',
          'url': 'hive-db'
        },
        {
          'label': 'Hive表',
          'name': '1',
          'url': 'hive-tbl'
        }
      ]
    }
  },

  mounted () {
    if (this.datas.length > 0) {
      this.activeName = this.datas[0].name
    }
    this.getActive()
  },

  watch: {
    '$route.path' (val) {
      this.getActive()
    }
  },

  methods: {
    handleClick (tab) {
      const url = this.$route.matched[1].path + '/' + this.datas[tab.name].url
      this.$router.push({
        path: url,
        query: this.query
      })
    },

    getActive () {
      const path = this.$route.path

      for (var p in this.datas) {
        const regexp = this.router + this.datas[p].name
        const reg = new RegExp(regexp)
        if (reg.test(path)) {
          this.activeName = this.datas[p].name
          break
        }
      }
    }

  }

}
</script>

我的在单页面可以用

---

3. 表格如何加子dom

原表格：

<el-table-column property="description" label="描述" width="400"></el-table-column>

加子dom：

<el-table-column property="name" label="库" width="600">
  <template slot-scope="scope">
    <span class="name">{{ scope.row.name }}</span>
  </template>
</el-table-column>

原来的name值，现在为scope.row.name

4. 子路由在兄弟间跳转，父tab激活问题

我们将父vue用以下代码表示。
我们全部围绕 this.$route来进行匹配路由。

<template>
  <div class="db-wrapper">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="item in datas" :key="item.name" :label="item.label" :name="item.name">  </el-tab-pane>
        </el-tabs>
        <router-view/>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {

  name: 'Hive',
  data () {
    return {
      thisUrl: '',
      activeName: '',
      datas: [
        {
          'label': 'Hive库',
          'name': '0',
          'url': 'hive-db'
        },
        {
          'label': 'Hive表',
          'name': '1',
          'url': 'hive-tbl'
        }
      ]
    }
  },

  mounted () {
    if (this.datas.length > 0) {
      this.activeName = this.datas[0].name
    }
    this.getActive()
  },

  watch: {
    '$route.path' (val) {
      this.getActive()
    }
  },

  methods: {
    handleClick (tab) {
      const url = this.$route.matched[1].path + '/' + this.datas[tab.name].url
      this.$router.push({
        path: url,
        query: this.query
      })
    },

    getActive () {
      const path = this.$route.path

      // path即为点击后的目标url
      for (var p in this.datas) {
        const regexp = this.$route.matched[1].path + '/' + this.datas[p].url
        const reg = new RegExp(regexp)
        if (reg.test(path)) {
          this.activeName = this.datas[p].name
          break
        }
      }
    }

  }

}
</script>

5. @click问题

@click可以加参数，或者不加

<span class="name" @click="queryDetails(scope.row.name)">{{ scope.row.name }}</span>

<span class="name" @click="queryDetails">{{ scope.row.name }}</span>

都是可以的。

6. 路由两种方式传参

https://www.cnblogs.com/toonezhr/p/10325457.html
类比于get和post
post版本：
A页面

 // 跳转到tbl页查询，参数为db和time
    queryDetails (name) {
      console.log('db跳转到tbl页，参数:', name, this.time)
      // 通过路由跳转的第二种方式，参数不出现的地址栏 https://www.cnblogs.com/toonezhr/p/10325457.html
      this.$router.push({
        name: 'hive-tbl',
        params: {
          name: name,
          time: this.time
        }
      })
    },

会跳到…/hive-tbl页面

B页面（即hive-tbl页面）：

 init () {
      this.page = 1
      this.pageSize = 10
      // 如果是从db页面查询进入到这个页面的，就将参数赋值
      if (this.$route.params.time != null) {
        this.time = this.$route.params.time
      }
      if (this.$route.params.name != null) {
        this.keywordDb = this.$route.params.name
      }
      console.log('db页传过来的参数为 time, keywordDb', this.time, this.keywordDb)
      this.reload()
    }
    ...
  mounted () {
    this.init()
  }
  

注意，本来是通过watch来检测路由的如下：

  watch: {
    '$route' () {
      console.log('tnlList页路由监听到变化,to:', 'from')
    }
  },

本次测试没生效。后续排查。

watch路由未生效？

7. pops

子组件中定义，用于父组件向子组件传值。见官网：
https://cn.vuejs.org/v2/guide/components-props.html
props写入对象数组时，特别注意格式，否则报错。正确格式：

export default {
  props: {
    searchData: {
      type: Array,
      default: function () {
        return []
      }
    }
  }
}

不能写成：

props: {
    searchData: [
		{}
      }
    ]
  }