Vue 组件化编程
2024年9月23日...大约 2 分钟
组件化编程是 Vue 的核心思想之一，它允许我们将一个复杂的页面拆分成多个小的、可复用的组件，从而提高代码的可维护性和可读性
定义一个组件
单文件组件
每个 .vue 文件就是一个组件，他包含了模板、脚本和样式三部分
<!-- Student.vue -->
<!-- 定义了一个组件 -->
<template>
<h1>{{ name }}</h1>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('John')
</script>
<style scoped>
h1 {
color: pink;
}
</style>HTML
一个 Vue 组件是一个包含 Vue 特定选项的对象
// Student.js
// 定义了一个组件
import { ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
export default {
setup() {
const name = ref('John')
return {
name
}
},
template: `
<div>
<h1>{{ name }}</h1>
</div>`
}组件注册
组件注册有两种方式：全局注册和局部注册
全局注册
全局注册的组件可以在任何地方使用，包括在父组件和子组件中
使用 component 方法注册组件
单文件组件
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Student from './components/Student.vue'
const app = createApp(App)
// 全局注册组件
app.component('Student', Student)
app.mount('#app')HTML
<body>
<div id="app">
{{ school }}
<Student></Student>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const school = ref('QFNU')
return {
school
}
}
}).component(
// 组件名称
'Student',
// 组件的实现
{
setup(){
const name = ref('John')
return {
name
}
},
template: `
<div>
<h1>{{ name }}</h1>
</div>`
}
).mount('#app')
</script>
</body>局部注册
局部注册的组件只能在注册它的父组件中使用，不能在父组件之外使用
单文件组件
<!-- App.vue -->
<template>
{{ school }}
<Student></Student>
</template>
<script setup>
// 导入组件即可
import Student from './components/Student.vue'
import { ref } from 'vue'
const school = ref('QFNU')
</script>HTML
<body>
<div id="app">
{{ school }}
<Student></Student>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
// 导入组件
import Student from './Student.js'
createApp({
// 注册组件
components: {
Student
},
setup() {
const school = ref('QFNU')
return {
school
}
}
}).mount('#app')
</script>
</body>命名规范
组件的命名有两种格式：kebab-case 和 PascalCase
- kebab-case：使用连字符连接单词，例如
my-component - PascalCase：使用大写字母开头，例如
MyComponent
注意：在 HTML 中使用组件时，必须使用 kebab-case 格式，例如 <my-component></my-component>
Powered by Waline v3.3.2