JS框架之vue.js(深入三:组件1）

这个要单独写，原文是这么描述vue的组件的：组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

这个特性我感觉比较难理解，一步步来，看看组件到底是个什么东西？

1.举个栗子

//model层：// 通过extend方式定义一个Vue组件var MyComponent = Vue.extend({template: '<div>A custom component!</div>'})// 向Vue注册这个组件，名称定为my-componentVue.component('my-component', MyComponent)// 创建根实例new Vue({el: '#example'})//Vue层：<div id="example"><my-component></my-component></div>

渲染为：

<div id="example"><div>A custom component!</div></div>

就是这个栗子，差点把我忽悠了，以为前面对extend的概念理解错了。还记得前面是这么描述
var MyComponent = Vue.extend（）的，Vue相当于基类，MyComponent继承了Vue，拥有了Vue的属性和方法，但是继承的概念还有另一层，就是基类是木有子类自定义的属性和方法的。这里的子类MyComponent扩展了一个属性template，按照继承的说法，Vue基类是不能使用的，但是这个栗子看似违背了这个规则，最后创建的是Vue实例，同时让模板生效了。正常的写法不是应该这样：

//model层：// 通过extend方式定义一个Vue组件var MyComponent = Vue.extend({template: '<div>A cu stom component!</div>'})// 不用注册//Vue.component('my-component', MyComponent)// 创建MyComponent 实例new MyComponent ({el: '#example'})//Vue层：<div id="example">//不用组件//<my-component></my-component></div>

经过试验，这种写法确实没错，也可以正常显示。问题来了，为什么第一种写法也是可以的，比较两处代码，发现第一种写法有一个注册过程，注册了一个my-component,最后使用的也是这个my-component，仔细想想，并不是说Vue实例可以使用template，而是向Vue注册了这个组件后，Vue实例就可以使用这个组件了，所以并不冲突。（吓死宝宝了- -）

想清楚这个后，再来考虑另外一个问题，这两种写法的区别在于哪里？
有没有发现，第二种写法其实是很有限制的，他替换了整个div，不管div中有多少内容。比如：

<div id="example">ssssdfsdaf<button>abc</button></div>

最后统统不见，被替换成<div>A cu stom component!</div>。灵活度太低，如果我只想替换ssssdfsdaf怎么办？所以就要用第一种方式了，于是幡然醒悟，原来这就是组件，就像一个零件一样，想往哪塞就往哪塞：