Vue3+TS Day11 - 初识组件、父子组件的通信

一、初识组件

1、为什么需要组件？换句话说，如果所有代码都放到App.vue会有什么问题？

• 【存在问题】将所有的代码逻辑全部放到一个组件中，代码会非常臃肿和难以维护。

image.png image.png

2、组件之间为什么要通信？父传子用什么？子传父用什么？

image.png image.png

3、父子通信中vue的实现方式，是不是和原生HTML中的button标签一致？

• 我认为思想是一致的，
• 比如class的attribute【对应】props
• 比如@click事件 【对应】 emits

二、父组件传递给子组件

1、什么是【props】？【props】的常见两种用法是什么？

image.png

2、【props】的数组用法？

image.png

3、【props】的对象用法？

image.png

4、一些细节补充（了解）。

image.png image.png image.png

5、非 【prop】的attribute怎么获取（了解）。

image.png image.png

三、子组件传递给父组件

1、什么情况下，子组件需要传递内容给父组件呢？

• 当子组件有一些事件发生的时候，比如在子组件中发生了点击，父组件需要切换内容时；

image.png

2、子组件传递给父组件，通常需要三个操作，是哪三个？

• ①子组件内，声明对外传递的事件，用OptionalAPI的emits选项进行配置；
• ②子组件内，监听点击事件，然后再点击事件的方法中发射事件this.$emit("pageChanged", this.currentIndex);；
• ③父组件内，以v-on的方式，去监听子组件emit的事件；

image.png image.png

3、一些其他细节（了解），和练习。

image.png image.png

// App.vue
<template>
  <div>
    <tab-control :tabs="tabs" @pageChanged="pageChanged"></tab-control>
    <hr />
    <h2>{{ tabs[currentIndex] + "页面" }}</h2>
  </div>
</template>

<script>
import TabControl from "./TabControl.vue";
export default {
  data() {
    return {
      tabs: ["鞋子", "衣服", "帽子"],
      currentIndex: 0,
    };
  },
  components: {
    TabControl,
  },
  methods: {
    pageChanged(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped>
</style>

// TabControl.vue
<template>
  <div class="nav">
    <template v-for="(item, index) of tabs" :key="item">
      <div @click="itemClicked(item, index)" class="item">
        <span :class="{ 'item-span': index === currentIndex }">{{ item }}</span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: ["tabs"],
  emits: ["pageChanged"],
  data() {
    return {
      currentIndex: 0,
    };
  },
  methods: {
    itemClicked(item, index) {
      console.log(item);
      this.currentIndex = index;
      this.$emit("pageChanged", this.currentIndex);
    },
  },
};
</script>

<style scoped>
.nav {
  display: flex;
}

.item {
  height: 44px;
  flex: 1;
  text-align: center;
}

.item-span {
  border-bottom: 4px red;
  border-bottom-style: solid;
}
</style>