手拉手Vue组件由浅入深

组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强。

组件化开发：
    1、将一个具备完整功能的项目的一部分分割多处使用
    2、加快项目的进度
    3、可以进行项目的复用

组件注册分为：全局注册和局部注册

目录

Vue组件

组件的生命周期钩子

组件嵌套关系

组件注册

组件数据传递props

传递数组，对象

类型验证

Props实现子传父

组件数据传递$emit

组件+v-model

透传

动态组件

​编辑

​编辑

异步组件

依赖注入-透传

---

Vue组件

组件的优点：可复用性

组件构成

组件引入

组件的生命周期钩子

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

创建期：beforeCreate、created

挂载期：beforeMount 、mounted

更新期：beforeUpdate、updated

销毁期：beforeUnmount 、unmountd

组件嵌套关系

组件允许将ui划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际项目中，组件是层层嵌套的树形结构，每个组件内封装自定义内容与逻辑。

取消main.css依赖

Article.vue

Item.vue
 

Hrader.vue

Main.vue

Aside.vue

效果

组件注册

局部注册(建议使用)

在一个组件中进行注册

全局注册

在main.js中全局注册

全局注册很方便，但是在全局注册中，没有被使用的组件无法在生成打包的时候被自动移除(“tree-shaking”)，依然出现在打包后的js文件中。

在项目嵌套较多的时候，全局注册的依赖关系不明确，可能影响应用长期维护性。

组件数据传递props

组件之间是可以传递数据，而传递数据的解决方案是props，注：props传递数据只能父级传递子级。

组件传递的数据类型：数字、对象、数字等。任何类型的值都可以作为props的值传递

组件间传递数据应用场景: 父传子

Parent.vue

Child.vue

传递效果

传递数组，对象

Parent.vue

Child.vue

传递对象

类型验证

Props实现子传父

组件数据传递$emit

组件模板表达式中，可以使用$emit方法触发自定义事件

组件间传递数据应用场景:子传父

Child.vue

Parent2.vue

组件+v-model

查询：

watch:{
        search(newValue,oldValue){
            this.$emit("searchEvent",newValue)
        }
    },

透传

透传attribute指的是传递给一个组件，没有被该组件声明为props或emits的arrtibute或者v-on事件监听器。最常见的例子就是class、id、style。

一个组件以单个元素为根做渲染时，透传的attribute会自动被添加到根元素上

App.vue

Attr.vue

效果

禁用透传attribute

export default{
    inheritAttrs:false
}

动态组件

Parent.vue

Child.vue

效果

动态穿透

全局数据

app.provide("golabData","全局数据")