资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

如何在Vue中使用组件

今天就跟大家聊聊有关如何在Vue中使用组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联是专业的湄潭网站建设公司，湄潭接单;提供成都做网站、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行湄潭网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

1、 组件的使用流程：

  //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页面实例化的div中使用组件:

  
    
    
  

如何在Vue中使用组件

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

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

如何在Vue中使用组件

4、父子组件

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

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

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

结果如图：

如何在Vue中使用组件

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插槽内插入内容：

  
    
      
向插槽中插入一段文字

    
  

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

如何在Vue中使用组件

实名插槽




  
实名插槽头部

  这是cpu插槽
  这是内存条插槽
  这是硬盘插槽




  Intel Core i5

Vue的优点

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

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


分享题目：如何在Vue中使用组件
链接地址：http://cdkjz.cn/article/joggej.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
高端网站设计不锈钢防护栏成都机房机柜租用seo网络营销推广成都电信服务器托管网站排名研学实践网络口碑营销创新互联重庆鼎尚理发店

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图