如何在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属性将组件转化为你要放入的组件,例如

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

    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
          };
        }
      });   
      
        
        
      

在页面中分别点击两个按钮,两个按钮组件的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://pwwzsj.com/article/joggej.html

其他资讯