Vue Components 全面指南
Vue 组件是构建 Vue 应用程序的核心单元，以下是关于 Vue 组件的详细说明：
1. 组件基础概念
组件定义方式
// 单文件组件 (SFC - .vue文件)
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
name: 'ExampleComponent',
data() {
return {
msg: 'Hello Vue!'
}
}
}
</script>
<style scoped>
.example {
color: red;
}
</style>
Props (属性传递)
props: {
// 基础类型检查
propA: Number,
// 多个可能的类型
propB: [String, Number],
// required + type check
propC: {
type: String,
required: true
},
// default value + validator
propD: {
type: Number,
default: function() {
return Math.random()
},
validator(value) {
return value >=0 && value <=1
}
}
Emits (事件发射)
emits: ['submit'], // Vue3显式声明emits
methods: {
handleClick() { this.$emit('submit', payload) }
}
// Vue3 setup语法糖写法:
const emit = defineEmits(['submit'])
function onClick() { emit('submit', payload) }
v-model双向绑定实现
<!-- CustomInput.vue -->
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
<!-- Parent usage -->
<CustomInput v-model="searchText" />
<!-- Vue3支持多v-model -->
<CustomInput v-model:text="text" v-model:pagination="page" />
Provide/Inject深度通信模式
// Ancestor提供数据(Vue3)
import { provide } from 'vue'
setup() { provide('location', 'North Pole') }
// Descendant获取数据(Vue3)
import { inject } from 'vue'
setup() { const location = inject('location', '默认值') }
Composition API (组合式API)示例
import { ref, computed } from 'vue'
export default {
setup(props) {
const count = ref(0)
const double = computed(() => count.value *2 )
function increment() { count.value++ }
return { count, double, increment }
}
}
Teleport传送门功能(Vue3特有)
<teleport to="#modals">
<div class="modal">Modal内容会传送到body下的#modals节点</div>
</teleport>
Suspense异步组件(Vue3特有)
<Suspense>
<template #default><AsyncComponent /></template>
<template #fallback>Loading...</template>
</Suspense>
这些特性覆盖了Vue2和Vue3中组件的核心用法，包括数据流管理、组合逻辑复用和高级功能等。
内容由零声教学AI助手提供，问题来源于学员提问
&1 请帮我分析有什么问题，这是在操作shar..." />
