vue3-组件基础

什么是组件

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行处理。在实际应用中，组件常常被组织成层层嵌套的树状结构。

定义一个组件

我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：

<script lang="ts" setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div class="container">
    <button @click="count++">你点击了我 {{ count }} 下.</button>
  </div>
</template>

<style lang="scss" scoped>
.container {
}
</style>

效果：

使用组件

要使用一个子组件，我们需要在父组件中导入它。

组件可以被重用任意多次

<script lang="ts" setup>
import { ref } from 'vue'
import ButtonCount from '@/components/ButtonCount.vue'
</script>

<template>
  <div class="container">
    <ButtonCount />
    <br />
    <ButtonCount></ButtonCount>
    <br />
    <button-count></button-count>
  </div>
</template>

<style lang="scss" scoped>
.container {
}
</style>

效果：

• 每当你使用一个组件，就创建了一个新的实例

• 在单文件组件中，推荐为子组件使用 PascalCase 的标签名，以此来和原生的 HTML 元素作区分。

<ButtonCount /> 或者
<ButtonCount></ButtonCount>

• 如果你是直接在 DOM 中书写模板 (例如原生 <template> 元素的内容)，模板的编译需要遵从浏览器中 HTML 的解析行为。

<!-- 如果是在 DOM 中书写该模板 -->
<button-count></button-count>

父组件向子组件传值 props

定义一个帖子的组件 通过 title 向子组件传标题的值

<script lang="ts" setup>
import { ref } from 'vue'
import Post from '@/components/Post.vue'

const posts = ref([
  { id: 1, title: '文章1标题' },
  { id: 2, title: '文章2标题' },
  { id: 3, title: '文章3标题' }
])
</script>

<template>
  <div class="container">
    <Post v-for="post in posts" :key="post.id" :title="post.title"></Post>
  </div>
</template>

<style lang="scss" scoped>
.container {
}
</style>

效果：

监听事件子组件事件 emits

通过点击标题后面的按钮放大标题

<script lang="ts" setup>
import { ref } from 'vue'
import Post from '@/components/Post.vue'

const posts = ref([
  { id: 1, title: '文章1标题', font: 1 },
  { id: 2, title: '文章2标题', font: 1 },
  { id: 3, title: '文章3标题', font: 1 }
])
</script>

<template>
  <div class="container">
    <Post
      :style="{ fontSize: post.font + 'em' }"
      v-for="post in posts"
      :key="post.id"
      :title="post.title"
      @changeFont="post.font += 0.1"
    ></Post>
  </div>
</template>

<style lang="scss" scoped>
.container {
}
</style>

效果

通过插槽来分配内容

可以向组件中传递内容

子组件

<script lang="ts" setup>
import { ref } from 'vue'
</script>

<template>
  <div class="container">
    <div class="alert-box">
      <strong>Error!</strong>
      <br />
      <slot />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  .alert-box {
    color: #666;
    border: 1px solid red;
    border-radius: 4px;
    padding: 20px;
    background-color: #f8f8f8;
  }

  strong {
    color: red;
  }
}
</style>

父组件

<script lang="ts" setup>
import { ref } from 'vue'
import DangerBox from '@/components/DangerBox.vue'
</script>

<template>
  <div class="container">
    <DangerBox> 可以传入自定义的内容 替换 slot </DangerBox>
  </div>
</template>

<style lang="scss" scoped>
.container {
}
</style>

效果:

如上所示，我们使用 <slot> 作为一个占位符，父组件传递进来的内容就会渲染在这里。

动态组件

有些场景会需要在两个组件间来回切换，比如 Tab 界面

通过 :is 属性实现组件切换 :is 的值可以是以下几种

1. 被注册的组件名

2. 导入的组件对象

当使用 <component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载。 我们可以通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态。

  <script lang="ts" setup>
import { ref } from 'vue'
import TabA from '@/components/TabA.vue'
import TabB from '@/components/TabB.vue'

const currentTab = ref('TabA')
const tabs = ref({ TabA, TabB })
</script>

<template>
  <div class="container">
    <button
      v-for="(_, tab) in tabs"
      :key="tab"
      :class="['tab-button', { active: currentTab === tab }]"
      @click="currentTab = tab"
    >
      {{ tab }}
    </button>
    <component :is="tabs[currentTab]" class="tab"></component>
  </div>
</template>

<style lang="scss" scoped>
.container {
  .demo {
    font-family: sans-serif;
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 20px 30px;
    margin-top: 1em;
    margin-bottom: 40px;
    user-select: none;
    overflow-x: auto;
  }

  .tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
  }
  .tab-button:hover {
    background: #757070;
  }
  .tab-button.active {
    background: #ea7a7a;
  }
  .tab {
    border: 1px solid #ccc;
    padding: 10px;
  }
}
</style>

效果：

至此 vue基础告一段落，恭喜能坚持看到现在的小伙伴，你们都很棒哟！可以多看几遍打牢基础。