vue组件和相关点

一.组件的分类

组件：本质上说，组件是可复用的 Vue 实例，且带有一个名字，具有一定功能。所以它们可以与 new Vue 接收相同的选项，例如 data、methods以及生命周期钩子等

组件分为：局部组件和全局组件
全局组件 ：全局注册的组件在注册后可以用于任意实例或组件中
局部组件：挂载后使用

组件必须只有一个根元素：template

二.组件的命名规则

一个组件在封装和使用的时候的命名规范–回顾
1.vue2.0版本文档介绍的以下2种组件命名方式：
第一种：使用 kebab-case（推荐使用这种，遵循 W3C 规范中的自定义组件名：字母全小写且必须包含一个连字符）

Vue.component(‘my-component-name’, { /* … */ }) 1 第一个参数
my-component-name就是当前组件的名字，是我们自己定义的名字。 当使用 kebab-case (短横线分隔命名)
定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。

第二种：使用 PascalCase

Vue.component(‘MyComponentName’, { /* … */ }) 1 当使用 PascalCase
(首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。 注意，尽管如此，直接在DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

组件命名规则
kebab-case: “my-component”
PascalCase: “MyComponent”
Vue.component(‘my-component’, {/* 选项对象 /})
Vue.component(‘MyComponent’, {/ 选项对象 */})
注意：无论采用那种命名方式，在 DOM 中都只有 Kebab-case 可以使用

分享地址来源：vue.js 官网https://cn.vuejs.org/v2/guide/components-registration.html

三.data与comnputed与watch的区别：

相同点：这三者指针存放的数据： html中可以直接获取

不同点：
data：是组件当中存放数据的主要属性（不用处理数据，单纯的存放。不用操作什么） 选项用于存储组件的数据，与根实例不同，组件的 data 选项必须为函数，数据设置在返回值对象中
ps:ajax请求来的数据，需要渲染的数据 /
通过各种传参方式传过来的参数
computed：计算属性（存放着需要计算的数据。需要变动的数据就放在computed中。这个数据和依赖目标有对应关系的） 该数据的值，通过依赖目标的改变，而改变 一个数据受多个数据影响 例如: a = 1 + 2 1,2就是a的依赖目标
.若是1和2改变时.a就是会发生变化 a 是被改变的 watch：监听属性（存放着需要监听的数据）
当监听的数据发生改变时，其他对应的数据也发生改变 a 是主动改变的，一个数据影响多个数据
computed与 watch 的区别： 主要区别就是使用场景的不同

四.组件通信

1、 父子之间通信 父传子props 子传父 $emit
父子组件间的所有 prop 都是单向下行绑定的
如果子组件要处理 prop 数据，应当存储在 data 中后操作
2、 同级之间通信 bus
3、 跨级之间通信
4.、 组件关系复杂且 数据量较大时的通信方式 vux
5.、 组件关系复杂但 数据量不大时的通信方式 bus
当组件嵌套关系复杂时，根据组件关系传值会较为繁琐
EventBus
组件为了数据中转，data 中会存在许多与当前组件功能无关的数据

	EventBus （事件总线）是一个独立的事件中心，用于管理不同组件间的传值操作
	EventBus 通过一个新的 Vue 实例来管理组件传值操作，组件通过给实例注册事件、调用事件来实现数据传递
	发送数据的组件触发 bus 事件，接收的组件给 bus 注册对应事件

其他通信方式
$root
$refs
$root
$root 用于访问当前组件树根实例，设置简单的 Vue 应用时可以通过此方式进行组件传值

除了 $root，Vue.js 中还提供了 $parent 与 $children 用于便捷访问父子组件

$refs
$refs 用于获取设置了 ref 属性的 HTML 标签或子组件

给普通 HTML 标签设置 ref 属性，$refs 可以获取 DOM 对象
给子组件设置 ref 属性，渲染后可通过 $refs 获取子组件实例

五.插槽

插槽：
	  官网中是这么说的：Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，
将 <slot> 元素作为承载分发内容的出口。也即是slot是用来实现分发内容的，通俗一点：slot是在父组建控制子组件显示或隐藏相关内容。

组件插槽。
组件插槽可以便捷的设置组件内容

单个插槽
如果我们希望组件标签可以像 HTML 标签一样设置内容，那么组件的使用灵活度会很高
我们需要通过 进行插槽设置

<script>
  Vue.component('com-a', {
    template: `
      <div>
        <h3>组件标题</h3>
        <slot></slot>
      </div>
    `
  })
</script>

<div id='app'>
  <com-a>
    示例内容
    <span>组件的主体内容</span>
  </com-a>
</div>