如何在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:{
    }
    });

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

结果如图：

5、插槽slot

像生活中的容器一样，slot允许向其中插入标签、组件等内容，而在外部提供一个框子包装起来。slot分为匿名插槽与实名插槽，匿名插槽可以向其中插入任何类型的内容。

实名slot可以将内容插入指定的插槽内，就像一台电脑的主板，cpu、内存条分别有自己对应的插槽，实名插槽在模板中通过name属性规定插槽的名字，在使用时，通过标签的slot属性指定对应的name，可以将标签插入指定的插槽。

匿名插槽

  
  
    
      
这是插槽头部
      插槽默认显示内容
      

      
插槽尾部
    
  
  let vue2=new Vue({
    el:'#app2',
    data:{
    },
    components:{
     //绑定匿名插槽
     'anonymous-slot':{
       template:'#anonymousDiv'
     },
     //绑定实名插槽
     'realname-slot':{
       template:'#realnameDiv'
     }
    }
  });

向cpu插槽内插入内容：

  
    
      
向插槽中插入一段文字
    
  

插槽未放入内容时：插入一段文字：

实名插槽

  
实名插槽头部
  这是cpu插槽
  这是内存条插槽
  这是硬盘插槽



  Intel Core i5

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

看完上述内容，你们对如何在Vue中使用组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联成都网站设计公司行业资讯频道，感谢大家的支持。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。