大兴网站定制开发教育网站开发报告

Vue组件

1. 组件及组件化

1.1 组件和组件化是什么？

组件：是独立的、可复用的Vue的实例，是一段独立的UI视图，在代码中体现就是一个.Vue文件，并且每个组件都可以独立开发、测试和维护。

组件化：是一种代码的开发思想，实质是把一个大型复杂的页面进行拆分，拆分成一系列小的且独立的组件，通过组件的组合和拼装，就可以得到一个复杂的大型页面，化大为小，化繁为简，从而提升代码的可复用性和维护性。

1.2 组件的使用

1. 每新建一个.vue文件，内部会默认导出这个组件对象

2. 组件分为局部组件和全局组件

   • 局部组件无需注册，在哪个文件中使用，在哪个文件中导入即可

   • 全局组件需要在main.js中注册，一旦注册可以在任意的.vue文件中使用

3. 把组件当作一个自定义标签使用

   • 可以是双标签，也可以是单标签

   • 可以是大驼峰的标签名MyComponent，也可以是烤串法的标签名my-component

1.3 全局组件的注册

全局组件需要在main.js中注册。

import { createApp } from 'vue'
import App from './App.vue'
import ComponentObject from './relative-path'const app = createApp(App)
app.mount('#app')
app.component('ComponentName' , ComponentObject)    # 注册全局组件 组件名建议和导入的名字一样

注册成功后，该组件可以在任意.vue文件使用。

且可以是双标签写法，也可以是单标签写法；可以是大驼峰标签名，也可以是烤串法标签名。

注意：使用component-name这类名称注册全局组件，使用时也只能用这类标签名。

app.component('component-name' , ComponentObject)      # 不能使用大驼峰标签,会显示不出来效果

2. 组件的生命周期与生命周期钩子

Vue组件的生命周期指的是一个Vue实例从创建到销毁的整个过程（创建 -> 挂载 -> 更新 -> 卸载），在整个过程中，Vue提供了一些特定的生命周期钩子函数，允许用户在不同阶段插入自定义代码。

setup()是最早执行的函数，是Vue3编写组合式API的起点。

2.1 创建阶段

钩子函数	说明
beforeCreate	组件实例被创建，但是数据没有被观测，函数没有初始化，因此这个时候是无法访问数据和调用方法
created	组件实例创建完成，此时可以通过组件实例访问数据和方法，但尚未挂载到DOM

2.2 挂载阶段

钩子函数	说明
beforeMount	此时template下的标签只是编译完成，但是并没有渲染到真实的DOM中，故无法获取到DOM元素
mounted	将编译完成的标签创建和插入到真实DOM中，此时可以获取DOM元素

2.3 更新阶段

钩子函数	说明
beforeUpdate	数据更新时调用，这里的更新指的是真实DOM前的更新，数据都是最新的，但此时访问真实DOM中的数据还是旧的
updated	数据改变时，对真实DOM的更新完成，此时访问真实DOM中数据是新的

2.4 卸载阶段

钩子函数	说明
beforeUnmount	Vue实例销毁之前调用
unmounted	Vue实例销毁之后调用

2.5 组合式API生命周期钩子

	创建阶段	挂载阶段	更新阶段	卸载阶段
Vue2	beforeCreate created	beforeMount mounted	beforeUpdate updated	beforeUnmount unmounted
Vue3	setup（网络请求）	onBeforeMount onMounted（操作DOM）	onBeforeUpdate onUpdated	onBeforeUnmount onUnmounted（清理工作）

<script setup>import { onMounted , onUnmounted } from 'vue'const timer = setInterval(() => { console.log("hello world") } , 1000)// 组件挂载后onMounted(() => {// DOM操作...})// 组件卸载onUnmounted(() => {clearInterval(timer)})
</script>

3. Vue组件通信

Vue组件通信是指在不同组件之间传递数据。

3.1 父子组件通信

3.1.1 父传子

父组件通过props将数组传递给子组件。

1. 父组件通过自定义属性传递数据

2. 子组件通过defineProps接收数据

// App.vue
<script setup>
import Item from './component/Item.vue';
// 提供数据
const obj= {id: '3998274',name: '孙悟空',age: 18,address: "花果山"
}
</script><template><div class="list">// props就是绑定在组件标签上的自定义属性<item :address="obj.address" :name="obj.name" :age="obj.age"></item></div>
</template>// Item.vue
<script setup>const props = defineProps(['address', 'name', 'age'])     // 配合插值表达式或指令使用
</script>

• 父传子为了解决子组件在复用时显示数据不同的问题，提高子组件的灵活性。

• props可以配合v-for遍历组件，每次循环独立传值。

3.1.2 子传父

子组件是不能修改父组件传递的数据，因为props是只读的。子组件利用emit通知父组件，让其对数据进行更新。

1. 父组件为子组件添加自定义事件（@自定义事件名 = "父修改数据的函数"）

2. 子组件通过defineEmits()拿到触发自定义事件的函数emit

3. 子组件在恰当时机，触发父组件的自定义事件，并且可以传递子想要交给父的数据

// App.vue
<script setup>
import { ref } from 'vue'
import Item from './component/Item.vue';let x = ref(0)const clickAdd = (num) => {x.value += num
}
</script><template><item :num="x" @clickAdd="clickAdd"></item>
</template>// Item.vue
<script setup>const props = defineProps(['num'])const emit = defineEmits(['handleClickAdd'])const handle = () => {emit('clickAdd' , 3)}
</script><template><button @click="handle">{{ props.num }}</button>
</template>

父传子，子传父，谁的数据谁负责。

3.2 props校验

绑定在标签上的自定义属性被称为props。

props检验为组件props指定验证要求，不符合要求，控制台会有错误提示，帮助开发者，快速发现错误。

3.2.1 普通写法

const props = defineProps(['自定义属性名1', '自定义属性名2', '自定义属性名3' , ...])

3.2.2 简易写法

const props = defineProps({自定义属性名: String/Number/Boolean/Array/Object...
})

3.2.3 完整写法

const props = defineProps({自定义属性名: {type: String/Number/Boolean/Array/Object...,    // 属性的类型required: true/false,                           // 是否是必传项default: "",                                    // 默认值// ...validator(value) {    // value父传子的值// 自定义校验逻辑return true/false}}
})

• default和required不应该同时出现，若同时出现，required优先，默认值无效。

• default后面如果是简单类型的值，可以直接写。如果是复杂类型，则需要以函数的形式return一个默认值。() => []

3.3 非父子组件通信

3.3.1 祖先传后代

祖先组件给后代组件传值，跨层级共享数据。

1. 祖先组件通过provide给后代提供数据

2. 后代组件通过inject获取数据

// 1.祖先组件
import { provide } from 'vue'
provide('数据名称' , value)// 2.后代组件
import { inject } from 'vue'
const value = inject('数据名称')

祖先组件的响应式数据也会影响到后代组件。

3.3.2 任意两个组件通信

任意两个组件通信使用事件总线（EventBus），虽然Vue3移除了内置的事件总线，但可以使用第三方库如mitt （npm install --save mitt）。

// eventBus.js 
import mitt from 'mitt'
export const emitter = mitt()// 组件A (发送事件)
import emitter from './eventBus.js'
emitter.emit('event-name', { data: 'value' })// 组件B (监听事件)
import emitter from './eventBus.js'
emitter.on('event-name', (data) => {console.log(data)
})