这是我参与「第四届青训营 」笔记创作活动的的第7天

1. 使用组件的三个步骤

1. 组件的父子关系：

2. 使用组件的三个步骤

①步骤一：在script标签内使用import导入需要的组件

②步骤二：在export内使用components节点注册事件：

③步骤三：以标签形式使用刚注册的组件：

3. 注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下:

2. 组件中的props

1. props定义

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！ 它的语法格式如下

若要传数字 则加上冒号：

2. 修改props值

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错

要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的

3. 设置props初始值

在声明自定义属性时，可以通过 default 来定义属性的默认值。示例代码如下

4. props的type值

在声明自定义属性时，可以通过 type 来定义属性的值类型。示例代码如下

5. props的require必填项

在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。示例代码如下：

3. 组件样式冲突

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。 导致组件之间样式冲突的根本原因是： ① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的 ② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域，示例代码如下

1. style节点的scoped属性

为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：

2. /deep/ 深度选择器

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器

4. vue渲染成js的过程

1. vue经过"vue-template-compiler": "^2.6.11"编译后转化为js文件渲染出去

2. 当用标签时，才会使用（new）一个组件实例