组件的概念

组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树：
在这里插入图片描述
每个组件都是相互独立的，组件是需要创建和注册之后才能使用的。注册分为全局注册和局部注册两种方式。

全局注册

语法

Vue.component('component-name', { 
	/* ... */ 
})

使用 Vue.component()方 法，可传入2个参数，第一个参数是组件名称，推荐使用(kebab-case)方式命名。

示例

<div id="app">
    <component-name></component-name> <!-- 以标签形式使用组件 -->
</div>

<script>
    // 定义一个名为 component-name 的新组件
    Vue.component('component-name', {
        //组件内容写这里
        template: "<div>这是一个全局组件</div>",
    })
    
    //声明一个vue实例
    var vueApp = new Vue({
        el: '#app',
    })
</script>

注意事项

全局组件必须写在Vue实例创建之前，才在该根元素下面生效
模板里面第一级只能有一个标签，不能并行
组件中的data必须是函数
标签嵌套会受到HTML规则的限制，如：<ul>，<ol>，<table>，<select>限制了能被它包裹的元素，而一些像<option>这样的元素只能出现在某些其它元素内部

局部注册

语法

var child={
  template:"<h1>我是局部组件</h1>"
};

new Vue({
  el: "#app1",
  components:{
    "child-component": child
  }
});

使用Vue实例中有个选项 components 注册局部组件，注册后就只在该实例作用域下有效

示例

<div id="app">
  <child-component></child-component>
</div>

var child = {
   template:"<button @click='add'>我是局部组件:{{m}}</button>",
   data:function(){
     return {m:1}
   },
   methods:{
     add:function(){
       this.m++
     }
   }
 };
 
 new Vue({
   el: "#app",
   components:{
     "child-component": child
   }
 })