vue移动端引用第三方组件-lytab（学习笔记）

网络上有个大神本身写了一个移动端可滑动（惯性滑动&回弹）Vue导航栏组件 ly-tab
而后我想把它用到个人项目中去，发现会有这个报错：SyntaxError: Unexpected token import
我也不知道是哪一个步骤操做不正确。我就把它的源码从node_modules文件中复制出来,放在components文件下

node_modules

components

在须要使用的组件中局部引用

import LyTab from '@/components/Scroll'

后来我发现仍是报SyntaxError: Unexpected token import
接着尝试把路径换成下面的就不会报错了

import LyTab from '@/components/Scroll/src/index.vue'

==========================================运用======================================

<ly-tab :items="sortList" :options="options" class="parent" v-model="selected"></ly-tab>
items是传递给子组件的数组
options是lytab的配置

export default {
  components: {
    LyTab
  },
  data() {
    return {
      sortList: [], //父分类
      i: 0,
      selected: 0,
      options: {
        activeColor: '#78d5f7',
        labelKey: 'name' // 在sortList数组中选择想要渲染的key名
      }
    }
  }
}

后面我须要去获取点击父分类的index值从而筛选子分类，因此我须要在源码的基础添加
index.vue子组件

<template>
  <div class="ly-tab">
    <ly-tabbar v-bind="options" v-model="selectedId">
      <ly-tab-item :key="index" v-for="(item, index) in items">
        <span slot="icon" v-if="options.fixBottom && item.icon">
          <i :class="item.icon"></i>
        </span>
        <span @click="getindex(index)">{{ item[labelKey] }}</span>
      </ly-tab-item>
    </ly-tabbar>
  </div>
</template>

新增getindex函数获取点击的index而后传递给父组件

父组件接收

<ly-tab :items="sortList" :options="options" @parent="parent" class="parent" v-model="selected"></ly-tab>
<div class="child" v-if="sortList[i].subCategoryList.length>0">
  <ul>
    <nuxt-link
      :key="index"
      :to="{path: '/quesbank/sort', query: {cp_id: item.pid, c_id: item.id}}"
      v-for="(item,index) of sortList[i].subCategoryList"
    >
      <li
        :class="$route.query.c_id===item.id?'activechild':''"
        v-if="item.name!==''"
      >{{item.name}}</li>
    </nuxt-link>
  </ul>
</div>

export default {
  components: {
    LyTab
  },
  data() {
    return {
      sortList: [], //父分类
      i: 0,
      selected: 0,
      options: {
        activeColor: '#78d5f7',
        labelKey: 'name'
      }
    }
  },
  mounted() {
    if (this.$route.query.cp_id) {
      this.selected = Number(this.$route.query.cp_id)
    }
  },
  //asyncData在服务端渲染
  async asyncData() {
    let res = await Net.getSort()
    let result = res.data.data
    result.unshift({
      name: '所有',
      id: 0,
      subCategoryList: []
    })
    for (let i = 0; i < result.length; i++) {
      if (result[i].subCategoryList) {
        for (let j = 0; j < result[i].subCategoryList.length; j++) {
          result[0].subCategoryList.push(result[i].subCategoryList[j])
        }
      }
    }
    result[0].subCategoryList.unshift({
      name: '所有',
      id: 0,
      pid: 0
    })
    return {
      sortList: result
    }
  },
  methods: {
  //获取index进行子分类的筛选
    parent(index) {
      this.i = index
    }
  }
}
</script>

写的很乱，是本身平时项目中的小总结