Vue基础总结（中）（组件）

一、组件

1.组件概述

组件化：封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护
组件：是可复用的Vue实例，封装标签、样式和JS代码

2.vue组件——创建

每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

• 组件内template只能有一个根标签

• 组件内data必须是一个函数, 独立作用域

3.vue组件——全局注册使用

全局入口在main.js, 在new Vue之上注册

//main.js引入

import Vue from 'vue'
import 组件对象 from 'vue文件路径'//引入组件文件对象

Vue.component("组件名", 组件对象)// 组件名开头大写驼峰(推荐)

使用如：<PannelC></PannelC>//把这个自定义标签当做组件解析

4.vue组件——局部注册使用

//App.vue中引入, 注册, 使用

import 组件对象 from 'vue文件路径'

export default {
   
    components: {
   
        "组件名": 组件对象
    }
}

• 组件使用总结
  ①(创建)封装html+css+vue到独立的.vue文件中
  ②(引入注册)组件文件 => 得到组件配置对象
  ③(使用)当前页面当做标签使用

5.vue组件——scoped作用

作用：解决多个组件样式名相同，冲突问题

加上scoped属性，即自动给标签添加data-v-hash值属性

二、组件通信

1.父向子 props

例如: App.vue(父) MyProduct.vue(子)

步骤：

• 创建组件components/MyProductvue - 准备标签
• 组件内在props定义变量, 用于接收外部传入的值（props属性名建议都小写,因为标签里的属性只能小写/把变量驼峰转成-连接）
• App.vue中引入注册组件, 使用时, 传入具体数据给组件显示

注意：在vue中需要遵循单向数据流原则：从父到子的数据流向。
props的值不能重新赋值, 对象引用关系属性值改变, 互相影响

2.子向父

步骤

• 父: @自定义事件名=“父methods函数”
• 子: this.$emit(“自定义事件名”, 传值) - 执行父methods里函数代码

总结：父自定义事件和方法, 等待子组件触发事件给方法传值

3.跨组件通信 EventBus

//EventBus/index.js- 定义事件总线bus对象
import Vue from 'vue'
const bus = new Vue()
export default bus

//List.vue注册事件
eventBus.$on('事件名', 函数体)

//Myp.vue
import eventBus from '../EventBus'

eventBus.$emit('事件名', 值)

总结: 空的Vue对象, 只负责 $on注册事件, $emit触发事件, 一定要确保 $on先执行

三、组件生命周期

• 生命周期：一组件从创建到销毁的整个过程
• 生命周期函数（钩子函数）：vue 框架内置函数，随着组件的生命周期，自动按次序执行
• 分类：初始化、挂载、更新、销毁
• 当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数

beforeCreate() {
   
  // 1. 创建前，在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  console.log("beforeCreate --- data初始化之前");
  console.log(this.msg); // undefined
},
created() {
   
  // 2. 创建后，在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
  console