混迹于前端界，当有人问你：‘组件’是什么？
如果你没有立马回答上来，而是很疑惑的样子，这样是很会被人鄙视的→_→
鄙视
言归正传，我们来讲讲组件是什么。
组件是Vue.js最推崇的 ，也是最强大的功能之一，核心目标是为了可重用性高，减少重复性的开发。我们可以把组件代码按照template、style、script的拆分方式，放置到对应的.vue文件中。
Vue.js的组件可以理解为预先定义好行为的ViewModel类。一个组件可以预定义很多选项，但最核心的是以下几个：
模板(template)——模板声明了数据和最终展现给用户的DOM之间的映射关系。
初始数据(data)——一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态。
接受的外部参数(props)——组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定(由上至下)，但也可以显式声明为双向绑定。
方法(methods)——对数据的改动操作一般都在组件的方法内进行，可以通过v-on指令将用户输入事件和组件方法进行绑定。
生命周期钩子函数(liftcycle hooks)——一个组件会触发多个生命周期钩子函数，比如created、attached、destroyed等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，这可以理解为Controller的逻辑被分散到了这些钩子函数中。
使用组件
#全局注册
我们已经知道，可以通过下方式创建一个Vue实例：
创建一个Vue实例
注意
组件在注册之后，便可以作为自定义元素<my-component></my-component>在一个实例的模板中使用。注意确保在初始化根实例之前注册组件：
Html
JS
渲染为：
Html
结果.jpg
#局部注册
你不必把每个组件都注册到全局。你可以通过某个Vue实例/组件的实例选项compents注册仅在其作用域中可用的组件：
局部注册
这种封装也适用于其它可注册的Vue功能，比如指令。
#DOM模板解析注意事项
当使用DOM作为模板时(例如，使用el选项来把Vue实例挂载到一个已有内容的元素上)，你会收到HTML本身的一些限制，因为Vue只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像<ul>、<ol>、 <table>、<select>这样的元素里允许包含的元素有限制，而另一些像<option>这样的元素只能出现在某些特性元素的内部。
在自定义组件中使用这些受限制的元素会导致一些问题，例如：
自定义组件<my-row>会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：
is
应当注意，如果使用来自以下来源之一的字符串模板，则没有这些限制：
因此，请尽可能使用字符串模板。
# data 必须是函数
构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。实际上，如果你这么做：
那么Vue会停止运行，并在控制台发出警告，告诉你在组件实例中 data 必须是一个函数。但理解这种规则为何存在也是很有益处的，所以接下来我们先作个弊：
由于这三个组件实例共享了同一个data 对象，因此递增一个 counter会影响所有组件！这就错了。我们可以通过为每个组件返回全新的数据对象来修复这个问题：
现在每个counter都有它自己内部的状态了:
就先写到这里吧(#^.^#)
网友评论