本文我们来介绍下Vue中的组件，组件是可复用的 Vue 实例，且带有一个名字。
组件的创建
extend方式
首先通过Vue.extend方法来定义一个全局组件。template就是组件将来要展示的HTML内容。然后通过ponent来添加我们的组件。（注意：组件的名称如果采用的是驼峰命名法，那么在使用组件的时候，大写必须改为小写，而且要用 “-”连接。）
<div id="app"><my-com></my-com></div><script>// 使用 Vue.extend 创建全局的Vue组件var com1 = Vue.extend({template: "<h3>这是个Vue组件</h3>"})// 使用 ponent('组件名称', 创建出来的组件对象) 添加组件ponent("myCom",com1);var vm = new Vue({el: "#app",data: {},})</script>
简写方式
在前面的基础上，我们可以简写 Vue.extend() 创建全局Vue组件的操作。
<div id="app"><my-com></my-com></div><script>ponent("myCom",{template: "<div><h3>这是个Vue组件</h3><p>Vue组件</p></div>"})var vm = new Vue({el: "#app",data: {},})</script>
注意：创建的组件中HTML元素只能有一个root标签，如果有多个时会报错，建议在所有元素最外层用< div>标签包起来。
template标签
在上面的例子中我们的组件元素都是直接在template中直接通过字符串来声明的，这种方式书写时没有智能提示，容易出现错误，这时我们可以通过<template>标签来定义组件HTML元素，然后通过id来使用。
<div id="app"><my-com></my-com></div><template id='com'><h3>这是个Vue组件</h3></template><script>ponent("myCom",{template: "#com"})var vm = new Vue({el: "#app",data: {},})</script>
私有组件
上面定义的都是全局的组件，接下来我们看看如何在单个Vue实例中定义私有的组件。
<div id="app"><my-com></my-com></div><div id="app1"><my-com></my-com></div><script>var vm = new Vue({el: "#app",data: {},//定义私有组件components:{'myCom':{template: "<h3>这是一个私有组件</h3>"}}})</script>
组件中的data和methods属性
组件中的这两个属性和Vue实例中的 data 和 methods 属性很类似，使用方式也是一样的。需要注意的是，组件中定义的 data 必须是一个函数，并且返回一个对象。
<div id="app"><my-com></my-com></div><script>ponent("myCom",{template:`<div><button @click='show'>调用方法</button><h3>这是个Vue组件,{{id}}:{{name}}</h3></div>`,data:function(){return {id:1,name:'my-com'}},methods:{show(){console.log('组件中的show方法被调用')}}})var vm = new Vue({el: "#app",data: {},})</script>
以上就是 data 和 methods 属性的使用，接下来我们讨论一下 data 属性为什么必须要返回一个对象呢？
我们要清楚组件和Vue实例的区别：Vue实例是在页面加载的时候被实例化的，一个页面就一个；而组件是可以复用的，也就是在一个页面中同一个组件可以有多个实例。如下案例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="/ajax/libs/vue/2.6.12/vue.min.js"></script></head><body><div id="app"><!--复用3个Vue组件--><counter></counter><counter></counter><counter></counter></div><template id="tmpl"><div><button @click="increment">加1</button><h3>{{count}}</h3></div></template><script>// 声明的全局对象var dataObj = {count: 0 }// 这是一个计数器的组件, 点击按钮,count值+ponent('counter', {template: '#tmpl',data: function () {return dataObj},methods: {increment() {this.count++}}})var vm = new Vue({el: '#app',data: {},methods: {}});</script></body></body></html>
通过演示我们可以看到，三个组件同时进行了累加，而我们需要的是分别累加互不干扰。
在data属性中返回一个对象，组件每次复用的时候都给返回一个新的实例对象，让组件实例之间数据独立。
![[vue] vue中data的属性可以和methods中的方法同名吗？为什么](https://1200zi.500zi.com/uploadfile/img/14/889/146e378e43f8d6e1dd4bd3f45d6e9c31.jpg)
