vue3学习-组件基础、深入组件

组件

基本概述

单独的 .vue文件 单文件组件（SFC）（single file component）

使用子组件

1. 导入，无需注册，直接使用
2. 编译时，区分大小写
3. 可使用 />关闭标签

传递 props

1. 需要再组件上声明注册 defineProps宏

<script setup> 
    cosnt props = defineProps(['title'])
	props.title

defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入。
组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值

监听事件

子组件通过$emit方法，抛出一个事件

父组件通过v-on 监听子组件抛出的事件

difineEmits 宏

defineEmits 宏 声明需要抛出的事件
并且不需要导入

• 声明了一个组件可能触发的所有事件
• 可以对事件的参数进行验证。
• 可以让vue 避免将他们作为原生事件监听隐式地应用于子组件地更目录

其他

1. 大小写区分:HTML 标签和属性名称是不分大小写的，所以浏览器会把任何大写的字符解释为小写。
2. 闭合标签： Vue 的模板解析器支持任意标签使用 /> 作为标签关闭的标志
3. 元素位置限制： ul、ol、table、select

深入组件

注册

全局注册

# app.component() 方法

参数1 组件名，参数2： 对象或组件

可以被链式调用

缺点

1. 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。
2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

局部注册

相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

组件名格式

使用 PascalCase (帕斯卡命名法) 的理由：

1. PascalCase 时合法的 JavaScript 标识符
2. <PascalCase/>更显著的表名了这是vue组件

Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。

props

声明 deineProps()

显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute

const props = deineProps(['foo'])
const props = defineProps({
    
    title: string,})

defineProps 无需引入，直接使用

definePorps使用形式：数组、对象

数组形式默认接受任何类型的值

默认prop都是可选的，未传的话默认值 undefined

Boolean类型未传值，默认转换为false

Prop 名字格式

• camelCase 驼峰名字格式
• 父组件向子组件传递值时，可使用 camelCase 和 camel-case犯法

单向数据流

1. 所有的 props 都遵循单向绑定原则

2. 避免子组件意外修改父组件的状态，导致数据流将很容易变得混乱而难以理解。

更改对象 / 数组类型的 props

1. JavaScript 的对象和数组是按引用传递
2. 虽然子组件无法更改 props 绑定，但仍然可以更改对象或数组内部的值。
3. 对 Vue 来说，禁止这样的改动，虽然可能生效，但有很大的性能损耗，比较得不偿失。

prop 校验

defineProps({
    
    
    a: Number,//a:[String, Number]
    a: {
    
    type: String, reuqired: true, default: 100},
    a:{
    
    validator(value) {
    
    return ['success','warning', 'danger'].includs(value)}}
})

defineProps() 宏中的参数不可以访问 `` 中定义的其他变量，因为在编译时整个表达式都会被移到外部的函数中。

Boolean类型转换

1. 有一种边缘情况——只有当 Boolean 出现在 String 之前时，Boolean 转换规则才适用：

<MyComponent disabled />
    
// disabled 将被转换为 true
defineProps({
    
    
  disabled: [Number, Boolean]
})
  
// disabled 将被解析为空字符串 (disabled="")
defineProps({
    
    
  disabled: [String, Boolean]
})

事件

tip: 事件声明时可选的,还是推荐你完整地声明所有要触发的事件

触发与监听事件

1. 事件的名字也提供了自动的格式转换，camelCase形式命名事件

2. 所有传入 $emit() 的额外参数都会被直接传向监听器。举例来说，$emit('foo', 1, 2, 3) 触发后，监听器函数将会收到这三个参数值。

$emit('incremnetClick',1,2,3,4)

声明触发的事件defineEmits()

通过 defineEmits() 宏来声明它要触发的事件

defineEmits(['inFocus', 'sumbit'])
function buttonClick() {
    
    
  emit('submit')
}

Emits验证

1. 支持对象语法：对触发事件的参数进行验证

const emit = defineEmites({
    
    
    submit(payload){
    
    
        // 通过返回值为 `true` 还是为 `false` 来判断
    	// 验证是否通过
    }
})

组件v-model

<Hello :modelValue = 'searchText' @update:modelValue='newvalue => searchText = newvalue'/>

内部方法一

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

update:modelValue 分号之间没有空格

内部方法二

使用一个可写的，同时具有 getter 和 setter 的 computed 属性。

import {
    
     computed } from 'vue'
let props = defineProps(['modelValue'])
let emit = defineEmits(['update:modelValue'])

let value = computed({
    
    
    get() {
    
    return props.modelValue},
    set(value) {
    
    emit('update:modelValue', value)}
})
<input v-model="value">

v-model参数

默认情况：v-model再组件上使用的时modelValue、update:modelValue

自定义

例如：v-mode:title=“text” ==== title、update:title

v-mode:title="text"

多个v-model 绑定

处理 v-model 修饰符

自定义修饰符

不带参的 v-model

<MyComponent v-model.aaa="myText" />
const props = defineProps({
    
    
    modelVlaue: Stirng,
    modelModifiers:{
    
    default: () => ({
    
    })}
})

handleClick() {
    
    
    if(props.modelModifiers.aaa){
    
    }//判断是否有某个修饰符
    emit('update:modelValue', '值')
}

带参数 v-model

<MyComponent v-model:title.capitalize="myText">
    const props = defineProps(['title', 'titleModifiers'])
defineEmits(['update:title'])

console.log(props.titleModifiers) // { capitalize: true }

透传 Attributes

指传递给组件，却没有被组件声明为props 或emits的 attributes

1. 属性 和监听器 默认透传到子组件的根元素上。
2. 如果子组件的根元素有点击事件，父组件也透传了点击事件，则，这个父级和子级的事件都会被触发

禁用 Attributes 继承

在子组件中配置i选项

<script setup> 
    defineOptions({
    
    inheritAttrs: false})

场景：attribute需要应用在根节点以外的其他元素上。

这些透传进来的 attribute 可以在模板的表达式中直接用 $attrs访问

<span>Fallthrough attribute: {
   
   { $attrs }}</span>

这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。

需要注意

1. 透传 attributes 在 JavaScript 中保留了它们原始的大小写，所以像 foo-bar 这样的一个 attribute 需要通过 $attrs['foo-bar'] 来访问。
2. 像 @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick。

多根节点的 Attributes 继承

有着多个根节点的组件没有自动 attribute 透传行为

如果 $attrs 没有被显式绑定，将会抛出一个运行时警告。

在 JavaScript 中访问透传 Attributes

import {
    
     useAttrs } from 'vue'
const attrs = useAttrs()

注意：

虽然这里的 attrs 对象总是反映为最新的透传 attribute，但它并不是响应式的 (考虑到性能因素)。你不能通过侦听器去监听它的变化。

插槽Slots

具名插槽

子组件：

父组件：使用 v-slot=“header” 指令 或者简写为 #header

<template #header> #等价于 <template v-slot:header>
    <h1>Here might be a page title</h1>
</template>

作用域插槽

场景：插槽中的内容需要用大父组件域内或子组件域内的数据。

<slot :text="greetingMessage" :count="1"></slot>
<aaa v-slot="slotProps">{
    
    {
    
    slotProps.text}}</aa>

子组件传入插槽的 props 作为了 v-slot 指令的值

v-slot=“{ text, count }”

具名作用域插槽

<slot name="header" :text="greetingMessage" :count="1"></slot>
<aaa v-slot:header="slotProps">{
    
    {
    
    slotProps.text}}</aa>

依赖注入

prop 逐级透传问题

实现跨父子孙组件传值

provide(提供)

1. 接受两个参数：
   1. 第一个：注入名，可以是一个字符串或是一个 Symbol。
   2. 第二个：提供的值，任意类型包括响应状态， ref
2. 一个组件可多次调用 provide() 使用不同的注入名

应用层 Provide

app.provide('message', 'hello')

在应用级别提供的数据在该应用内的所有组件中都可以注入。

inject（注入）

import {
    
    reject} from 'vue'
// const props = defineProps()

如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。这使得注入方组件能够通过 ref 对象保持了和供给方的响应性链接。

注入默认值

const value = inject('message', '这是默认值')

在一些场景中，默认值可能需要通过调用一个函数或初始化一个类来取得。为了避免在用不到默认值的情况下进行不必要的计算或产生副作用，我们可以使用工厂函数来创建默认值：

js

const value = inject('key', () => new ExpensiveClass(), true)

第三个参数表示默认值应该被当作一个工厂函数。

和响应式数据配合使用

建议尽可能将任何对响应式状态的变更都保持在供给方组件（父）中

import {
    
     provide, ref } from 'vue'
function updateLocation() {
    
     location.value = 'South Pole' }
provide('location', {
    
     location, updateLocation})

const {
    
     location, updateLocation } = inject('location')
<button @click="updateLocation">{
    
    {
    
     location }}</button>

使用 Symbol 作注入名

避免潜在的冲突

// keys.js
export const myInjectionKey = Symbol()

// 在供给方组件中
import {
    
     provide } from 'vue'
import {
    
     myInjectionKey } from './keys.js'

provide(myInjectionKey, {
    
     /*
  要提供的数据
*/ });

// 注入方组件
import {
    
     inject } from 'vue'
import {
    
     myInjectionKey } from './keys.js'

const injected = inject(myInjectionKey)

异步组件

基本用法

vue提供了 defineAsyncComponent 方法来实现此功能

import {
    
     defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
    
    
    return new Promise((resolve, reject) => {
    
    
        resolve(/*获取到的组件*/)
    })
})
# 或者
import {
    
     defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

AsyncComp 是一个外层包装过的组件，仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将接收到的 props 和插槽传给内部组件，所以你可以使用这个异步的包装组件无缝地替换原始组件，同时实现延迟加载。

2. 与普通组件一样，异步组件可以使用 app.component()

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

3. 可以直接在父组件中直接定义它们

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

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>