版权声明：如果喜欢，就收藏吧 O(∩_∩)O~ https://blog.csdn.net/deniro_li/article/details/84884553
使用 Vue.js 组件，可以提高控件及其 JS 能力的可复用性。
1 定义第一个组件
Vue.js 组件需要注册后才可以使用，注册分为全局注册和局部注册。全局注册后，任何 vue 实例都可以用这个组件。
html：
<div id="app">
<deniro-component></deniro-component>
</div>
js：
Vue.component('deniro-component',{
template:'<div>亚马逊一统美国电商天下？你想多了</div>'
});
var app = new Vue({
el: '#app',
data: {}
});
- component 的第一个参数是组件名称，建议使用小写减号的风格来命名组件。
- 要使用这个自定义组件，必须在创建实例前先注册这个组件。
- template 必须是一个DOM 结构，这样才能被正确渲染。
输出结果：
<div id="app"><div>亚马逊一统美国电商天下？你想多了</div></div>
2 局部注册
使用 Vue 实例中的 components 属性可以局部注册组件，通过这种方式注册后的组件，只有在该实例的作用域下才是有效的。
html：
<div id="app2">
<deniro-component></deniro-component>
</div>
js：
var child = {
template: '<div>亚马逊一统美国电商天下？你想多了</div>'
};
var app2 = new Vue({
el: '#app2',
components: {
'deniro-component': child
}
});
渲染效果与上例相同。
3 摆脱 HTML 限制
组件中定义的模板，在某些情况下，是会受到 HTML 限制的。比如 <table> 内规定只允许出现 <tr>、<td> 以及 <th> 等表格元素，还有 <ul>、<ol>、<select> 等元素也有类似的限制。在这种情况下，我们可以使用 is 属性来挂载组件。
html：
<div id="app3">
<table>
<tbody is="deniro-component"></tbody>
</table>
</div>
js：
Vue.component('deniro-component', {
template: '<div>亚马逊一统美国电商天下？你想多了</div>'
});
var app3 = new Vue({
el: '#app3',
data: {}
});
渲染结果：
<div id="app3"><table><div>亚马逊一统美国电商天下？你想多了</div></table></div>
**注意：**这里如果使用常规方法来使用组件，那么模板中的内容将在 <table> 之外！
html：
<table>
<tbody><deniro-component></deniro-component></tbody>
</table>
渲染结果：
<div id="app3"><div>亚马逊一统美国电商天下？你想多了</div><table><tbody></tbody></table></div>
**注意：**如果使用的是字符串模板，那么是不受 HTML 限制的。
4 组件中的 data
Vue.js 组件中的 data 必须是函数（Vue.js 实例中的 data 是对象）。
html：
<div id="app4">
<deniro-component4></deniro-component4>
</div>
js：
Vue.component('deniro-component4', {
template: '<div>{{content}}</div>',
data: function () {
return {
content: '优信淘宝达成战略合作，共建二手车在线交易商城'
}
}
});
var app4 = new Vue({
el: '#app4'
});
渲染结果：
<div id="app4"><div>优信淘宝达成战略合作，共建二手车在线交易商城</div></div>
data 定义的函数，如果 return 的是一个外部对象，而这个对象又被多个组件所引用，那么任何一个组件修改了这个对象的值，其它组件都会受到影响。
html：
<div id="app5">
<deniro-component5></deniro-component5>
<deniro-component5></deniro-component5>
<deniro-component5></deniro-component5>
</div>
js：
var data = {
counter: 0
};
Vue.component('deniro-component5', {
template: '<button @click="counter++">{{counter}}</button>',
data: function () {
return data;
}
});
var app5 = new Vue({
el: '#app5'
});
效果：
为了避免这个问题，我们必须在 data 中返回一个新的对象。
html：
<div id="app6">
<deniro-component6></deniro-component6>
<deniro-component6></deniro-component6>
<deniro-component6></deniro-component6>
</div>
js：
Vue.component('deniro-component6', {
template: '<button @click="counter++">{{counter}}</button>',
data: function () {
return {
counter: 0
};
}
});
var app6 = new Vue({
el: '#app6'
});
这样的组件就可以复用啦O(∩_∩)O~