01-vue中不用vuex实现tab例子

最新推荐文章于 2022-01-20 14:23:13 发布

原创最新推荐文章于 2022-01-20 14:23:13 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue深度学习记录专栏收录该内容

5 篇文章

订阅专栏

1-在components下新建tab和page组件

1.1-tab组件代码如下：

<template>
  <div>
    <a
      href="javascroript:;"
      :class="[{ current: curIdx === 0 }]"
      @click="changeTab(0)"
      >选项1</a
    >
    <a
      href="javascroript:;"
      :class="[{ current: curIdx === 1 }]"
      @click="changeTab(1)"
      >选项2</a
    >
    <a
      href="javascroript:;"
      :class="[{ current: curIdx === 2 }]"
      @click="changeTab(2)"
    >选项3</a
    >
    <a
      href="javascroript:;"
      :class="[{ current: curIdx === 3 }]"
      @click="changeTab(3)"
      >选项4</a
    >
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
  name: "Tab",
  props:{
      curIdx:Number
  },
  components: {},
  // 定义属性
  data() {
    return {};
  },
  // 方法集合
  methods: {
      changeTab(index){
          this.$emit("changeTab",index)
      }
  },
 
};
</script>

<style  scoped>
a{
    margin-right: 10px;
}
.current{
    text-decoration: none;
    color: #000;
}

</style>

1.2-page组件代码如下:

<template>
  <div>
    {{ content[curIdx] }}
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
  name: "Page",
  props: {
    curIdx: Number,
  },
  components: {},
  // 定义属性
  data() {
    return {
      content: ["页面1", "页面2", "页面3", "页面4"],
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},

  // 方法集合
  methods: {},
};
</script>

<style lang='stylus' scoped></style>

2-在app组件里引入tab和page组件，注册，App.vue代码如下：

<template>
  <div id="app">
    <tab :curIdex="curIdx" @changeTab="changeTab"/>
    <page :curIdx="curIdx"/>
  </div>
</template>
<script>
import Tab from './components/tab/index.vue';
import Page from './components/page/index.vue'
export default {
  name:'App',
  components: {
    Tab,
    Page
  },
  data () {
    return {
      curIdx:0
    }
  },
  methods: {
    changeTab(index){
      this.curIdx = index;

    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

3-页面运行效果如下：