概念：组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
Vue.component("btn-component", { data() { return { count:0 } }, methods: { add:function(){ this.count++; } }, template:"<button @click='add'>点击增加count：{{count}}</button>" })组件可以复用，进行任意次数的复用，每用一次组件，就会有一个vue的新实例被创建。
data必须是一个函数，一个组件的 data 选项必须是一个函数，这样每个实例可以维护一份被返回对象的独立的数据，如果不用函数，则一个数据会影响到其它所有实例
组件的注册
1.两种注册类型：全局注册和局部注册
//通过Vue.component进行全局注册组件 Vue.component('my-component-name', { // ... options ... }) //局部注册 var componentA = {template:"<p>局部注册避免用户下载的javascript增加。</p>"} var componentb = {template:"<p>局部注册通过webpack使用ES6模块导入,import....from...xxx.vue</p>"} var app = new Vue({ el: "#content", components: { //注意，局部注册可以单写一个变量名，但是要全部小写 "component-a": componentA, componentb } })props向子组件进行传值
1.一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
2.组件中data和props的区别： data 就是返回一个组件自身的数据对象 props 是组件用来接收父组件数据对象的
<div id="app"> <text-component text="helloWorld" title="你好，世界！"></text-component> </div> <script> Vue.component("text-component", { props: ['title','text'], template: "<h2>{{title}}</h2>" }) var app = new Vue({ el: "#app" }) </script>3.我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。
在定义vue组件的template时，可以用 JavaScript 的模板字符串来让多行的模板更易读。使用折行转义字符取而代之。
Vue.component("text-component", { props: ['id','title','text'], template: ` <div> <ul> <li>{{id}}</li> <li>{{title}}</li> <li>{{text}}</li> </ul> </div> ` })基于组件的双向绑定
<div id="app"> <input-component v-model="changeText"></input-component> <h3>{{changeText}}</h3> </div> <script> Vue.component("input-component", { props:['value'], template: ` <input :value="value" @input="$emit('input',$event.target.value)" /> ` }) var app = new Vue({ el:"#app", data: { changeText: "helloWorld！" } }) </script>插槽slot
<div id="app"> <div-component> <div-component-btn slot="div-component-btn"></div-component-btn> </div-component> </div> <script> Vue.component("div-component", { template:` <div> <p>通过插槽可以向组件中插入html代码</p> <slot name="div-component-btn"></slot> </div> ` }) Vue.component("div-component-btn", { template:"<button>我是一个按钮</button>" }) var app = new Vue({ el:"#app" }) </script>动态组件
<component :is="currentView"></component> components:{ p1, p2, p3 },