Vue 组件基础
封面图
•
2025-11-18
•
Vue
0
0
0
0
Vue 是一个用于构建用户界面的渐进式 JavaScript 框架,它允许你通过组件(Component)的方式组织代码。Vue 组件是可复用的 Vue 实例,具有自己的模板、数据、方法和生命周期钩子等。 --- ## 🧱 一、Vue 组件基础概念 ### 1. **组件是什么?** 组件是一个可复用的 Vue 实例,它封装了 HTML、CSS 和 JavaScript,可以像普通 HTML 标签一样使用。 例如: ```html <my-component></my-component> ``` ### 2. **组件的定义方式** 在 Vue 中,你可以通过 `Vue.component()` 全局注册组件,也可以在某个 Vue 实例中局部注册组件。 #### 全局注册(适用于多个地方使用) ```javascript Vue.component('my-component', { template: '<div>这是一个组件</div>' }) ``` #### 局部注册(只在当前实例中可用) ```javascript new Vue({ el: '#app', components: { 'my-component': { template: '<div>这是局部组件</div>' } } }) ``` --- ## 🧩 二、组件的基本结构 一个基本的 Vue 组件通常包含以下几个部分: ```javascript { // 模板(HTML) template: `<div>{{ message }}</div>`, // 数据(响应式数据) data() { return { message: 'Hello from component!' } }, // 方法 methods: { greet() { alert(this.message) } }, // 生命周期钩子 mounted() { console.log('组件已挂载') } } ``` --- ## 📦 三、组件通信(父子组件之间) ### 1. **父组件向子组件传递数据(props)** - 父组件通过 `props` 向子组件传递数据。 - 子组件通过 `props` 接收数据。 #### 父组件: ```html <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { parentMessage: '来自父组件的数据' } } } </script> ``` #### 子组件(ChildComponent.vue): ```html <template> <div>{{ message }}</div> </template> <script> export default { props: { message: { type: String, required: true } } } </script> ``` --- ### 2. **子组件向父组件传递数据($emit)** - 子组件通过 `$emit` 触发事件,父组件监听该事件并处理。 #### 子组件: ```html <template> <button @click="sendData">发送数据</button> </template> <script> export default { methods: { sendData() { this.$emit('data-sent', '这是子组件发送的数据') } } } </script> ``` #### 父组件: ```html <template> <child-component @data-sent="handleData"></child-component> </template> <script> export default { methods: { handleData(data) { console.log('接收到子组件的数据:', data) } } } </script> ``` --- ## 🔄 四、组件的生命周期钩子 Vue 组件有以下生命周期钩子: | 钩子函数 | 描述 | |----------|------| | `beforeCreate` | 实例刚被创建,数据未初始化 | | `created` | 实例已经创建完成,数据已初始化 | | `beforeMount` | 模板编译前 | | `mounted` | 模板渲染完成,可以访问 DOM | | `beforeUpdate` | 数据更新前 | | `updated` | 数据更新后 | | `beforeDestroy` | 实例销毁前 | | `destroyed` | 实例销毁后 | 示例: ```javascript export default { mounted() { console.log('组件已挂载') }, beforeDestroy() { console.log('组件即将销毁') } } ``` --- ## 🎨 五、组件的样式作用域(scoped styles) 如果你希望组件的样式只作用于当前组件,可以使用 `scoped`: ```html <style scoped> .my-class { color: red; } </style> ``` 这样,样式只会影响当前组件中的元素,不会影响其他组件。 --- ## 🧰 六、组件命名规范 - **PascalCase**:适用于 Vue 单文件组件(如 `MyComponent.vue`),在模板中使用 `MyComponent`。 - **kebab-case**:适用于 HTML 模板中使用(如 `<my-component>`)。 --- ## ✅ 总结 | 内容 | 说明 | |------|------| | 组件 | 可复用的 Vue 实例 | | 注册方式 | 全局 / 局部 | | 通信方式 | props(父传子)、$emit(子传父) | | 生命周期 | created, mounted, updated, destroyed 等 | | 样式作用域 | 使用 `scoped` 防止样式污染 | | 命名规范 | PascalCase / kebab-case | --- 如果你需要我帮你写一个具体的组件示例或者讲解更深入的内容,随时告诉我!😊
上一篇:
Vue 模板引用
下一篇:
Vue 生命周期
标题录入,一次不能超过6条
留言
评论