注册

组件注册分为全局注册和局部注册

全局注册

在 main.js里

const app = crateApp(App)
app.component('globalComponentName, globalComponentFile)
app.mount('#app')

这里几个要注意的是

注册组件的方法是 app.component 不是 app.components
注册全局组件也就是 app.component 要写在mount 挂载之前,否则该组件无法注册成功

然后子组件就可以直接引用全局组件了.

全局组件的缺点:

对 tree-shaking 不友好,只要注册了不管用没用都会被打包到 js 文件里去
引用时不利于定位该组件的实现

局部注册

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

<script setup>
    import List from filePath
</script>
<template>
    <List></List> // 可以直接这样调用
</template>

vue 组件的命名规范,推荐用PascalCase写法

props

申明用

defineProps({

})

可以用驼峰命名,不过更推荐用 a-b 的命名,这样更符合 html 的书写风格

使用一个对象绑定多个 props

const post = { id: 1, title: 'My Journey with Vue' }

模板代码

<BlogPost v-bind="post">
</BlogPost>

等价于

<BlogPost :id="post.id" :title="post.title">
</BlogPost>

单项数据流

props 只能用于传入,子组件不能直接修改父组件传过来的 props 如果想修改,只能再定义一个局部属性来承接它. 应用场景: 比如收藏组件的是否收藏的初始态是从父组件的接口传过来的但是它点击收藏和取消收藏之后子组件里的收藏是要改变的. 那么可以类似这样.

const props =defineProps(['initialCounter'])
const counter = ref(props.initialCounter)

props 校验

propF: {
    validator(value) {
        return ['success', 'warning', 'danger'].includes(value)
    }
}

校验如果不符合结果会怎么样呢比如上面propF返回的结果是 false,我看 vue 官方文档是说本地是开发环境,然后 prop 的校验没有通过的话会在运行环境的控制台提示的,但是我看了下并没有看到这个校验未通过的提示,而我明明传入的是未通过校验的值,比如传入的 color 是 red,但是还是运用上了.

运行时类型检查

可以用自定义的类来校验

defineProps({
    author: Person //这个 Person 是你自己定义的类
})

Boolean类型转换

<!-- 等同于传入 :disabled="true" --> <MyComponent disabled />
<!-- 等同于传入 :disabled="false" --> <MyComponent />

事件

事件监听和触发

子组件调用父组件的事件

// 父组件
<GButton @getData="callback"></GButton>
// 子组件
<button @click="$emit('getData')"></button>
//还可以这么写.once 修饰符是说最多只能触发一次事件
<button @click.once="$emit('getData')"></button>

事件参数

申明触发的事件

const emit = defineEmits(['functionA','functionB'])
emit('functionA')

vue3 -深入组件讲解

注册