一.组件基础

1.其是什么，好处：是一个可复用的Vue实例，里边儿封装了HTML、CSS、JS

好处：相互独立、复用性、扩展性、可维护性高。

2.如何使用：#1封装组件：一个Vue文件就是一个组件        #2引入组件

#3注册组件：

1全局注册（在 main.js 中注册，注册后所有地方都可以使用，Vue.component(组件名，组件对象)）

2局部注册（在要使用的组件中注册, 只能在当前组件中使用。components: {
  组件名: 组件对象
}）

#4使用组件：组件名作为标签名使用即可

二.scoped

1.其作用：让 style 中的所有样式只针对当前组件标签生效

2.原理：给当前组件所有标签添加一个 data-v-hash 的属性，给所有选择器添加一个交集的属性选择器[data-v-hash]

<style lang="scss" scoped>

</style>

三.组件通信

#1父传子

1.1用法：在子组件中使用props定义变量准备接收，在父组件中使用属性传递数据

1.2注意事项：单项数据流（1.Vue 为了让我们数据流向更清晰, 不允许在子组件中修改父组件传递的数据, 如果不小心修改了, 父组件不会收到更新, 同时还会报错。2.父组件传递给子组件的数据, 只能由父组件修改, props 的数据都是只读的）

 #2子传父用法：

2.1在父组件中给子组件绑定自定义事件，

2.2在子组件中恰当的时机触发事件，并携带数据

2.3父组件的事件处理函数执行，处理对应的业务