组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强。
组件化开发：
1、将一个具备完整功能的项目的一部分分割多处使用
2、加快项目的进度
3、可以进行项目的复用
组件注册分为：全局注册和局部注册
Vue组件
组件的优点：可复用性
组件构成
<template> </template> <script> export default{ } </script> <style> </style>
组件引入
组件的生命周期钩子
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
创建期：beforeCreate、created
挂载期：beforeMount 、mounted
更新期：beforeUpdate、updated
销毁期：beforeUnmount 、unmountd
<script> export default{ beforeCreate(){ console.log("创建之前") }, created(){ console.log("创建之后") }, beforeMount(){ console.log("挂载之前") }, mounted(){ console.log("挂载之后") }, beforeUpdate(){ console.log("更新之前") }, updated(){ console.log("更新之后") }, beforeUnmount(){ console.log("销毁之前") }, unmountd(){ console.log("销毁之后") } } </script>
组件嵌套关系
组件允许将ui划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际项目中，组件是层层嵌套的树形结构，每个组件内封装自定义内容与逻辑。
取消main.css依赖
Article.vue
<template> <H3>Article</H3> </template> <style scoped> h3{ width: 80%; margin: 0 auto; text-align: center; line-height: 100px; box-sizing: border-box; margin-top: 25px; background: #bdbaba; } </style>
Item.vue
<template> <H3>Item</H3> </template> <style scoped> h3{ width: 80%; margin: 0 auto; text-align: center; line-height: 100px; box-sizing: border-box; margin-top: 25px; background: #bdbaba; } </style>
Hrader.vue
<template> <H3>Header</H3> </template> <style scoped> h3{ width: 100%; height: 100px; border: 5px solid #999; text-align: center; line-height: 100px; box-sizing: border-box; } </style>
Main.vue
<template> <div class="main"> <H3>Main</H3> <Article/> <Article/> <Article/> </div> </template> <script> import Article from "./article.vue" export default{ components:{ Article } } </script> <style scoped> .main{ float: right; width: 85%; height: 500px; border: 5px solid #999; box-sizing: border-box; text-align: center; } </style>
Aside.vue
<template> <div class="aside"> <H3>Aside</H3> <Item/> <Item/> <Item/> </div> </template> <script> import Item from './Item.vue'; export default{ components:{ Item } } </script> <style scoped> .aside{ float: left; width: 14%; height: 500px; border: 5px solid #999; box-sizing: border-box; text-align: center; } </style>
效果
组件注册
局部注册(建议使用)
在一个组件中进行注册
全局注册
在main.js中全局注册
全局注册很方便，但是在全局注册中，没有被使用的组件无法在生成打包的时候被自动移除(“tree-shaking”)，依然出现在打包后的js文件中。
在项目嵌套较多的时候，全局注册的依赖关系不明确，可能影响应用长期维护性。
组件数据传递props
组件之间是可以传递数据，而传递数据的解决方案是props，注：props传递数据只能父级传递子级。
组件传递的数据类型：数字、对象、数字等。任何类型的值都可以作为props的值传递
组件间传递数据应用场景: 父传子
Parent.vue
<template> <h3>Parent</h3> <input v-model="msg"> <Child :title="msg" test="数据"/> </template> <script> import Child from './Child.vue'; export default{ data(){ return{ msg:"" } }, components:{ Child } } </script>
Child.vue
<template> <h3>Child</h3> <p> {{ title }} </p> <p>{{ test }}</p> </template> <script> export default{ data(){ return{ } }, //接收数据 props:["title","test"] } </script>
传递效果
手拉手Vue组件由浅入深（下）：https://developer.aliyun.com/article/1431698
