使用 Vue.js 组件，可以提高控件及其 JS 能力的可复用性。

1 定义第一个组件

Vue.js 组件需要注册后才可以使用，注册分为全局注册和局部注册。全局注册后，任何 vue 实例都可以用这个组件。

html：

js：

Vue.component('deniro-component',{	template:'
    
     亚马逊一统美国电商天下？你想多了
    
'});var app = new Vue({	el: '#app',	data: {}});复制代码

component 的第一个参数是组件名称，建议使用小写减号的风格来命名组件。

要使用这个自定义组件，必须在创建实例前先注册这个组件。

template 必须是一个DOM 结构，这样才能被正确渲染。

输出结果：

<div id="app"><div>亚马逊一统美国电商天下？你想多了</div></div>

2 局部注册

使用 Vue 实例中的 components 属性可以局部注册组件，通过这种方式注册后的组件，只有在该实例的作用域下才是有效的。

html：

js：

var child = {	template: '
    
     亚马逊一统美国电商天下？你想多了
    
'};var app2 = new Vue({	el: '#app2',	components: {		'deniro-component': child	}});复制代码

渲染效果与上例相同。

3 摆脱 HTML 限制

组件中定义的模板，在某些情况下，是会受到 HTML 限制的。比如 <table> 内规定只允许出现 <tr>、<td> 以及 <th> 等表格元素，还有 <ul>、<ol>、<select> 等元素也有类似的限制。在这种情况下，我们可以使用 is 属性来挂载组件。

html：

js：

Vue.component('deniro-component', {	template: '
    
     亚马逊一统美国电商天下？你想多了
    
'});var app3 = new Vue({	el: '#app3',	data: {}});复制代码

渲染结果：


    
     
      亚马逊一统美国电商天下？你想多了
     
     
    
复制代码

**注意：**这里如果使用常规方法来使用组件，那么模板中的内容将在 <table> 之外！

html：

渲染结果：


    
     
      亚马逊一统美国电商天下？你想多了
     
     
      
     
    
复制代码

**注意：**如果使用的是字符串模板，那么是不受 HTML 限制的。

4 组件中的 data

Vue.js 组件中的 data 必须是函数（Vue.js 实例中的 data 是对象）。

html：

js：

Vue.component('deniro-component4', {	template: '
    
     {
    {content}}
    
',	data: function () {		return {			content: '优信淘宝达成战略合作，共建二手车在线交易商城'		}	}});var app4 = new Vue({	el: '#app4'});复制代码

渲染结果：


    
     
      优信淘宝达成战略合作，共建二手车在线交易商城
     
    
复制代码

data 定义的函数，如果 return 的是一个外部对象，而这个对象又被多个组件所引用，那么任何一个组件修改了这个对象的值，其它组件都会受到影响。

html：

js：

var data = {	counter: 0};Vue.component('deniro-component5', {	template: '',	data: function () {		return data;	}});var app5 = new Vue({	el: '#app5'});复制代码

效果：

为了避免这个问题，我们必须在 data 中返回一个新的对象。

html：

js：

Vue.component('deniro-component6', {	template: '',	data: function () {		return {			counter: 0		};	}});var app6 = new Vue({	el: '#app6'});复制代码

这样的组件就可以复用啦O(∩_∩)O~