Vue学习之组件用法实例详解

前端  /  管理员 发布于 5年前   509

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

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

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中使用组件:

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

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

  2、template模板

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

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

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

  3、组件的data

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

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

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

  4、父子组件

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

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

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

    
            
  向插槽中插入一段文字
        

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

  实名插槽

    
  Intel Core i5

  结果：cpu放入指定插槽，而其他插槽未受影响：

  希望本文所述对大家vue.js程序设计有所帮助。

  您可能感兴趣的文章:

  • vue之父子组件间通信实例讲解(props、$ref、$emit)
  • vue如何引用其他组件（css和js）
  • vue mounted组件的使用
  • Vue2实现组件props双向绑定
  • vue-dialog的弹出层组件
  • Vue-Router实现组件间跳转的三种方法
  • 详解用vue编写弹出框组件
  • Vue.js每天必学之组件与组件间的通信
  • Vue.js 递归组件实现树形菜单（实例分享）
  • Vue.js路由组件vue-router使用方法详解