组件

组件的深入了解

---

前言

深入的去了解组件，组件在vue开发者还是占有比较重的位置

一、注册

组件注册：可以是全局注册也可以是局部注册

全局注册简单示例1

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

单文件注册示例

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

局部注册

在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

如果没有使用 <script setup>，则需要使用 components 选项来显式注册：

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

组件名格式

采用PascalCase作为组件名的注册格式

---

二、Props

---

显示声明Props

在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明

<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>

在没有使用 <script setup> 的组件中，prop 可以使用 props 选项来声明

export default {
  props: ['foo'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.foo)
  }
}

传递 prop 的细节

如果prop使用的名称是骆驼拼写法，在组件使用时应该把单词分开中间加-

defineProps({
  greetingMessage: String
})
<MyComponent greeting-message="hello" />

静动态Prop

<BlogPost title="My journey with Vue" />

<!-- 根据一个变量的值动态传入 -->
<BlogPost :title="post.title" />

<!-- 根据一个更复杂表达式的值动态传入 -->
<BlogPost :title="post.title + ' by ' + post.author.name" />

传递不同的值类型

参见vue传递不同类型的值

单向数据流

所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。

另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。若你这么做了，Vue 会在控制台上向你抛出警告：

如果想更改传过来的值，则可以重新定义一个值进行接收。

Prop 校验

参见Prop 校验