介绍：
组件的使用场景：在做项目当中，有些模块我们是要多次用到的，或者这一块是一个完整独立的功能，那么我们可以将其独立出来，封装成一个组件。
一、组件的使用
首先，我们要创建（注册）一个组件，主要两种方式：
- 在本页面中创建一个template模板，这种方式实际开发中不太常用，请自行百度
- 单独创建.vue文件，形成一个组件，下面主要介绍这种模式
1、创建.vue文件
<template>
<div>
此处可以写想要的模板
</div>
</template>
<script>
export default {
name: "myComponent",
data() {
return {}
},
methods: {},
mounted() {}
}
</script>
2、引用
<template>
<div>
<my-component></my-component><!--在此处引用组建-->
</div>
</template>
<script>
import MyComponent"./myComponent";//首先我们要导入进来
export default {
components: {MyComponent},//加入组建当中
data() {
return {}
},
methods: {},
mounted() {}
}
</script>
二、组建的一些特性
1、props传值（父组件向子组件传值）
组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过 props 来实现的。
我们来看一下例子：
<script>
export default {
name: "myComponent",
data() {
return {}
},
props: {
testData1: Array,//没有默认值的形式，传入的值必须是数组
testData2: [Boolean,Number],//必须是Boolean或者Number类型
testData3: {//有默认值的形式，传入的值必须是字符串
type: String,
default: function() {
return 'hello 小梵'
}
}
},
methods: {},
mounted() {}
}
</script>
注：数据是单向传递的，该变父组件的值，子组件会发生变化，但是在子组件中处理props中的值，父组件不会发生变化。
2、组件中间传值
i）、使用$ emit()
子组件用 $ emit()来触发事件，父组件用$on（）来监听子组件的事件
例子如下：
//子组件:
<template>
<div>
<p @click="test()">点击+1</p>
</div>
</template>
<script>
export default {
name: "myComponent",
data() {
return {
count: 0
}
},
methods: {
test() {
this.count++;
this.$emit ('increase', this.count);
}
},
mounted() {}
}
</script>
//父组件
<my-component @test="otherFun"></my-component>
<script>
methods: {
otherFun() {
//在此处进行操作
}
},
</script>
ii）、 $dispatch()和 $broadcast()
这两个方法用于向上级派发事件，只要是它的父级（一级或多级以上），都可以在Vue 实例的 events 选项内接收。
注：此方法是vue1.x 的内容，此处不做讲解
iii）、使用slot分发
当需要组件组合使用时，混合父组件和子组件模板时，就会用到slot，这个过程就叫做内容分发。
例子：
<div id="app">
<child-component>
<p>分发内容</p>
<p>更多</p>
</child-component>
</div>
<script>
Vue.component(' child-component ',{
template:'\
<div>\
<slot>\
<p>如果父组件没有插入内容，默认显示</p>\
</slot>\
</div>',
});
var app = new Vue({
el:'#app',
})
</script>
iv）、其他的一些可以通信的方式
-
$ nextTick
异步更新队列：Vue观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生所有数据改变。在缓冲时会去除重复数据避免不必要的计算。在下一个事件循环tick中，Vue刷新队列并执行实际工作。
当页面有 v-if 判断时，逻辑处理处理中会对相应的dom进行操作，但此时元素并未加载，页面就会报错，所以要使用$ nextTick。$ nextTick就是用来知道什么时候dom更新完成的。扫描二维码关注公众号，回复： 5241019 查看本文章
-
X-Templates
当组件内容过长时使用拼接字符串是很麻烦的。Vue提供了另一种定义模板的方式，在<script>标签中使用text/template类型，并指定id赋值template。这样在<script>中可以写html代码，不需要考虑换行问题了。 -
手动挂载实例
我们现在所创建的实例都是通过 new Vue（）的形式创建出来的 。在一些非常特殊的情况下，我们需要动态地去创建 Vue 实例， Vue 提供了Vue.extend和$mount两个方法来手动挂载 个实例。
Vue.extend是基础 Vue 构造器，创建 个“子类”，参数是 个包含组件选项的对象。
如果 Vue 实例在实例化时没有收到 el 选项，它就处于“未挂载”状态，没有关联的 DOM元素。可以使用$mount()手动地挂载一个未挂载的实例。这个方法返回实例自身，因而可以链式调用其他实例方法。
注：以上内容，很多模块都值得细细研究，可以自行百度进行补充