这是我参与「第四届青训营」笔记创作活动的第7天

前言

随着青训营大项目的推荐，我们的项目使用vue3＋ts来写的，所以越开发到后面，代码逐渐更新迭代，越需要了解一些关于vue3的更加深刻的理解，组件是vue3的精髓所在，通过将不同的组件封装，我们可以让我们的页面更加易读，从而更好维护不同功能的组件。对于团队开发来说，我们也能够开发各自不同的板块，互不影响。

props声明

组件不能是仅仅包含着固定的内容，vue3是响应式的。所以我们需要进行父子组件间的通信。 props可以在子组件中声明该子组件可以接收什么样的数据，并对自己的状态进行响应式的改变。

搭配ts

在<script setup> 的单文件中，通过defineProps()来定义Props

<script setup lang="ts">
    defineProps<{
      title?: string
      likes?: number
    }>()
</script>

名字格式

如果prop的名字太长，应使用camelCase形式进行命名

defineProps({
  greetingMessage: String
})

在DOM组件中，我们为了跟attribute对齐，应使用kebab-case形式
在DOM组件中，我们的组件名应使用PascalCase形式

<MyComponent greeting-message="hello" />

事件

与props相同，$emit也是用来进行父子通信的，通过$emit可以自定义事件。相当于父组件给子组件传递了一个方法。当子组件身上的方法被触发，就调用父组件传进来的方法。 eg：

CusButton.vue

  <elButton @click="emit('increaseBy',2)">
    increase by 2
  </elButton>
  const emit = defineEmits(['increaseBy']) //声明接收emit

parent.vue

<CusButton @increase-by="increaseCount"></CusButton>
const state = reactive({
    count:0
})
function increaseCount(n:number){
    state.count += n
}

插槽 Slots

我们写一个子组件有时候里面的不是固定不变的，需要父组件给子组件传递一个代码片段，这个时候就需要用到slots插槽如下面这个vue3官方文档中给到的例子:

//父组件中
<FancyButton>
  Click me! <!-- 插槽内容 -->
</FancyButton>


<button class="fancy-btn">
  <slot></slot> <!-- 插槽出口 -->
</button>

<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

具名插槽

在日常的开发中，我们经常遇到的都是需要同时给一个组件传递多个不同的插槽，这时候就需要用到具名插槽了

具名插槽允许我们给插槽提供一个name的attribute，在传递插槽的时候，组件会根据不同的name来识别每个插槽的内容，如下面这个例子：

子组件
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件
<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <template #default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>

其中 #header是v-slot:header的缩写

依赖注入

我们进行父子通信的时候通常使用prop进行数据传递，但是当我们的DOM树结构非常复杂时，逐级进行数据传递会非常的麻烦，因此我们引入依赖注入通过provide和inject的方式进行简化我们的数据传递过程。

provide()函数接收两个参数，第一个参数被称为注入名，第二个参数是提供的值(包括响应式的状态) inject()注入函数可以接收到provide()函数传递进来的数据

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

结语

通过vue3中的组件功能，我们有了更多的灵活性来编写我们的应用程序，再配合上vue官方提供的vite使用，将大大提升我们的开发效率。熟练了解vue3的高级功能才能够写出更高级的功能。

Vue3深入组件|青训营笔记

前言