Vue组件以及插槽的使用方法

1.vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：
模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

2.全局组件定义的四种方式

第一种使用 Vue.extend 配合 Vue.component 方法：

第二种直接使用 Vue.component 方法：

第三种：将模板字符串，定义到script标签中，使用 Vue.component 来定义组件：


第四种：将模板字符串，定义到自定义标签中，使用 Vue.component 来定义组件：


注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

3. 私有组件定义

这里只介绍了第四种方法私有组件定义，但是其他三种方法都大同小异，私有组件中components 需注意与全局组件相比加了一个‘s’

4.组件中展示数据和响应事件

在组件中，data需要被定义为一个方法，例如：

5.使用component标签，来引用组件，并通过:is属性来指定要加载的组件：

mode 只能应用于组件

6.slot插槽

什么是插槽？
插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

6.1普通插槽/默认插槽

6.2具名插槽

添加具体的名字name