tab页案例（Vue组件传值）

最新推荐文章于 2024-05-04 02:42:40 发布

爱学习的小欣欣

最新推荐文章于 2024-05-04 02:42:40 发布

阅读量730

点赞数

CC 4.0 BY-SA版权

分类专栏： # 前端案例学习文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_47227886/article/details/125618419

前端案例学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍Vue.js中父子组件之间的通信方式。父组件通过props向子组件传递数据，并监听子组件触发的事件。子组件则使用$emit来向父组件发送事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父子组件之间如何进行通信呢？

父组件传递给子组件：通过props属性；
子组件传递给父组件：通过$emit触发事件；

1.父组件

<template>
  <div>
    <hello-world :titles="titles" @titleClick="titleClick"></hello-world>
    <div class="contents">{{contents[currentIndex]}}</div>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      titles: ["衣服", "鞋子", "裤子"],
      contents: ["衣服页面", "鞋子页面", "裤子页面"],
      currentIndex: 0
    };
  },
  methods: {
    titleClick(index) {
      this.currentIndex = index;
    }
  }
};
</script>

<style scoped>
.contents {
  margin: 50px 20px;
}
</style>

2.子组件


<template>
  <div class="tab">
    <div
      class="item"
      v-for="(item,index) in titles"
      :key="index"
      @click="titleClick(index)"
      :class="{active:currentIndex===index}"
    >
      <span>{{item}}</span>
    </div>
  </div>
</template>
<script>
export default {
  emits: ["titleClick"],
  props: {
    titles: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      currentIndex: 0
    };
  },
  methods: {
    titleClick(index) {
      this.currentIndex = index;
      this.$emit("titleClick", index);
    }
  }
};
</script>

<style scoped>
.tab {
  display: flex;
  margin-top: 50px;
}
.item {
  flex: 1;
  text-align: center;
  font-size: 30px;
}
.active span {
  color: red;
  border-bottom: 3px solid red;
  padding: 5px 10px;
}
</style>

/*coderwhy老师Vue3+TS学习笔记*/