一. 组件定义与父子组件传值把页面拆成小块代码一块独立功能就是组件可以重复使用。分两类父组件引入、使用别人的组件子组件被引入、接收父传数据父组件script setup langts import Child from ./Child.vue // 引入子组件 /script template 我是父组件 br Child/ /template子组件用 defineProps 接收script setup langts // 父组件 - 子组件传值 // props作用父组件给子组件传递数据 const props defineProps({ msg: { type: String, // 限定字符串 required: false, // 非必传 default: 未传值 // 不传时默认值 } }) /script template div 我是子组件 br 传值{{ msg }} br /div /template二. 子传父defineEmits配套补充父组件script setup langts import Child from ./Child.vue // 引入子组件 import {ref} from vue // 引入子组件 const msg ref(父组件原值) const getMsg (value: string) { msg.value value } /script template 我是父组件 br 子组件传的值{{ msg }} Child change-msggetMsg/ /template子组件script setup langts // 子组件 - 父组件传值 const emit defineEmits{ change-msg: [msg: string] }() const send () { emit(change-msg, 子组件传给父组件) } /script template div 我是子组件 br button clicksend传值给父组件/button /div /template三. 生命周期生命周期组件从创建 → 渲染页面 → 更新 → 销毁全过程自动触发的函数。Vue3 在 setup 里使用必须先导入不能写在函数 / 异步里面。一. 执行完整顺序从上到下setup()和script setup最先执行比所有生命周期都早onBeforeMountDOM 还没渲染页面空白onMountedDOM 渲染完成页面元素已经存在最常用onBeforeUpdate数据变了页面还没更新onUpdated页面 DOM 更新完毕onBeforeUnmount组件销毁前DOM 还在onUnmounted组件销毁完成DOM 被移除二. 父子组件执行顺序父 setup父 onBeforeMount子 setup子 onBeforeMount子 onMounted父 onMounted三. 高频使用场景记忆一进页面请求接口、获取 DOM → onMounted组件关闭清除定时器 / 监听 → onUnmounted数据变化后操作最新 DOM → onUpdated四. 组件拆分复用拆分组件可以使得代码解耦、可复用、提高可维护性。拆分原则要遵循单一职责、可复用、层级拆分等。基础复用 - 全局公共组件定义全局组件、在main.ts全局注册后续使用不需要导入import { createApp } from vue import { createPinia } from pinia import App from ./App.vue import Card from ./components/Card.vue // 全局组件 const app createApp(App) app.use(createPinia()) app.component(Card, Card) // 全局注册 app.mount(#app)使用全局注册的公共组件script setup langts // import Card from ./Card.vue; /script template 我是父组件br !-- 不需要导入可以直接使用 -- Card/ /template
