这是我参与「第五届青训营」伴学笔记创作活动的第 24 天

组件

注册

组件只有被注册之后才可以使用，注册又分为全局注册和局部注册。组件名推荐使用PascalCase。

全局注册需要使用应用的.component()方法，传入的两个参数分别为名字和组件的实现。支持链式调用。

import { createApp } from 'vue'
import Component from './Component.vue'

const app = createApp({});
app.component('Component', Component)
   .component('SecondCom', {
   //...
   })

全局注册的组件可以被此应用的任意模板使用。

局部注册通过在单文件组件的<script setup>中导入组件或者使用components选项注册（名字: 导入的组件名）。

Props

props是一种特殊的属性用来进行父组件与子组件值的传递，可以使用defineProps宏来声明props，通过传入数组或者对象来规定要接受的props，会返回一个对象。

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

defineProps({
  name: String,
  age: Number
})
</script>
<template>
<p>{{ name }}<p>
</template>

<PropsComponent name=""/>

传入对象时语法类似于TypeScript，名称: 接受值的类型。类型还可以时自定义的class。

注意在DOM和模板中使用时，要用kebab-case书写（会进行自动格式抓换所以定义props还是可以用camelCase）。

props也可以使用v-bind来进行动态绑定来传递数、布尔值、对象、数组，并且使用无参数的v-bind可以同时绑定具有多个props的对象。

props是只读的，在父组件流入的值更新时props会随之跟新，但如果流入的是一个对象仍然可以改变对象内部属性的值，但应该避免去更改。如果要不得不对流入的原始数据进行修饰可以通过计算属性。

校验

props为对象时可以使其增添校验选项来满足需求。

defineProps({
  prop1: {
    type: Object,
    default(Props) {
      return { msg: 'msg'}
    }
  }
})

事件

$emit

子组件可以传入事件名称到$emit来得到一个自定义事件，使其在父组件中可以被监听。具有和props相同的书写格式。

<template>
<button @click="$emit('myEmit')">Click</button>
</template>

<Emit @my-emit="" />

传入$emit的额外参数将会被传递给父组件的监听器。

<button @click="$emit('myEmit', 1, 2)">Click</button>

<Emit @click="(x, y) => value = x + y" />

也可以使用defineEmits宏在<script setup>中定义事件，会返回一个类似于$emit的函数。

<script setup>
const emit = defineEmits(['submit'])
defineProps({
  x: Number
})
function addTen() {
  emit('submit', 10)
}
</script>

<template>
  <button @click="addTen"> Value: {{ x }}</button>
</template>

<script>
import Emit from 'Emit.vue'
import { ref } from 'vue';
let x = ref(0)
</script>

<template>
<Emit @submit="(n) => x += n" :x="x"></Emit>
</template>

也可以为其增加校验。

Vue组件相关学习 | 青训营笔记

组件

注册

Props

校验

事件

$emit