本文实例讲述了Vue学习之组件用法。分享给大家供大家参考，具体如下：

Vue中的模块化、可重用代码块将页面细分为一个个功能组件，而且组件之间可以嵌套。组件分为全局组件与局部组件，局部组件在实例中进行注册，并且只可以应用于该实例中。

1、 组件的使用流程：

  //1、创建组件构造器
    let overallDiv=Vue.extend({
      template:`
        <div>
          <p>这是一个全局组件div</p>
        </div>
      `
    });
  //2、注册全局组件
    Vue.component('overall-div',overallDiv);
  //3、实例化,组件只有在实例化的div内才能使用，不可以直接在页面中使用
    let vue=new Vue({
      el:'#app',
      data:{},
    //在实例内注册局部组件，其创建与注册可以合为一步来写
    components:{
      'local-div':{
        template:
          ` <div>
              <p>这是一个局部组件div</p>
           </div>
          `
      }
    },
    methods:{
    }
    });

在HTML页面实例化的div中使用组件:

  <div >
    <local-div></local-div>
    <overall-div></overall-div>
  </div>

注意：一些HTML标签对放入其中的标签有限制，这时需要通过is属性将组件转化为你要放入的组件，例如<ul>标签下只能放<li>，这时，你可以使用<li is="my-component">，这样就相当于放入了<my-component>标签。

2、template模板

组件的模板除了在js中创建外，还可以使用页面中的template创建模板，注意页面中的模板只能有一个根元素，如有多个元素需要包含在一个div内，例如页面body中的模板：

  <template >
    <div>
      <p>这是页面中的模板</p>
    </div>
  </template>

在js中通过id号注册模板。

  Vue.component('my-tmp',{
    template:'#myTmp'
  });

3、组件的data

在组件中使用data必须以函数的形式返回,如果以属性值的形式存在，所有的组件会共享一个属性值，更改其中一个，所有的组件都会收到影响。例如一个统计被点击次数的组件：

  <template >
    <div>
      <button @click="count++">按钮被点击{{count}}次</button>
    </div>
  </template>

  Vue.component('my-btn',{
    template:'#myBtn',
    data () {    //以函数返回的方式定义组件使用的data
      return {
        count:0
      };
    }
  });   
  <div >
    <my-btn></my-btn>
    <my-btn></my-btn>
  </div>

在页面中分别点击两个按钮，两个按钮组件的count分别计数，不会互相干扰：

4、父子组件

先创建子组件，然后再父组件内进行注册，就可以在父组件的模板内使用子组件，然后再注册父组件，这样就可以在外部调用包含子组件的父组件了，外部直接使用父组件接口，而不需要知道内部子组件的实现

注意在外部不能直接使用子组件，因为它只在父组件内进行了注册，外部看不到子组件

  let child1=Vue.extend({
    template:`<div>这是子组件1</div>`
  });
  let child2=Vue.extend({
    template:`<div>这是子组件2</div>`
  });
  Vue.component('parent',{
    components:{
      'c1':child1,
      'c2':child2
    },
    //在父组件内调用子组件
    template:`<div>父组件<c1></c1><c2></c2></div>`
  });
  <div >
    <parent></parent>
  </div>