如何在Vue中使用组件-创新互联

  //1、创建组件构造器
    let overallDiv=Vue.extend({
      template:`
        

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

              
这是一个局部组件div
           
          `
      }
    },
    methods:{
    }
    });

注意：一些HTML标签对放入其中的标签有限制，这时需要通过is属性将组件转化为你要放入的组件，例如

标签下只能放
• ，这时，你可以使用
• ，这样就相当于放入了标签。

  2、template模板

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

    
      
  
        
  这是页面中的模板
      
    

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

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

  3、组件的data

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

    
      
  
        按钮被点击{{count}}次
      
    

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