vue组件化开发、vue组件封装使用步骤、scoped实现组件的私有样式、vue组件通信、父传子、子传父、、

vue组件化开发

组件是可复用的 Vue 实例, 封装标签, 样式和JS代码

vue组件分类：

1. 页面组件
2. 页面下的功能组件

组件化开发 ：一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能

● 封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护

一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构（template） 样式(style) 和 行为(script) (html, css和js)

小结

● 现代前端开发均会使用组件化的开发思路
● 组件化开发有利于解决代码重复、冗余等问题

vue组件-封装使用

为啥要封装组件

1. 复用。一次封装，多次使用
2. 代码整理，方便维护。

步骤

1. 定义组件
2. 注册组件
3. 使用组件

案例

定义一个名为MyCom的组件，并在App.vue中使用它

目录
├── App.vue  # 在App.vue内部，导入并使用组件
└── MyCom.vue

1. 创建组件： MyCom.vue 组件名开头大写驼峰(推荐)

2. 引入并注册组件

   // 局部注册组件

   // 进入到当前组件内部
   // 1. 导入组件
   import 组件名 from ‘./组件文件.vue’

   // 2. 局部注册
   export default {
   components: {
   组件名: 组件名
   }
   }

3. 使用组件。在当前页面中，当做标签来使用。
   注意：
   组件名不能与现有的html标签名一致。

小结

● 每一个组件都是封闭的。它有自己的template, script，style
● 组件之间可以相互引用使用。

vue组件-用scoped实现组件的私有样式

目标

解决多个组件样式名相同, 冲突问题

问题说明

默认组件style 中定义的样式是全局=》存在相同名字覆盖的情况

解决方案

局部样式：在style标签上加上scoped属性

<stype scoped>
  h2 {} // 样式只会在当前组件内生效
</style>

原理

● 在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性
● 而且必须是当前组件的元素或者子组件的根元素, 才会有这个自定义属性