VUE-组件以及插槽

1.vue组件

  • 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一

  • 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用

  • 1.1 全局组件定义的四种方式

  • 1.使用 Vue.extend 配合 Vue.component 方法:

    例:var login = Vue.extend({

        template: '

    登录

    '
      });
      Vue.component('login', login); 

    2.直接使用 Vue.component 方法:

    例:Vue.component('register', {

        template: '

    注册

    '
      });

    3.将模板字符串,定义到script标签中:

    例:

        

    登录 | 注册

      

    同时,需要使用 Vue.component 来定义组件:

    Vue.component('account', {

        template: '#tmpl'
      });

    4.将模板字符串,定义到template标签中:

    例:< template id="tmpl">

        

    登录 | 注册

      

    同时,需要使用 Vue.component 来定义组件:

    Vue.component('account', {

        template: '#tmpl'
      });

    注意:组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!

  • 父子组件

    父子组件是组件之间的一种关系,这个关系并不是绝对的,而是相对的。通常,如果在A组件中 使用 了B组件,那么就称A组件为B组件的父组件,相应地,B组件就称为A组件的子组件

    
    
    
    
    

  • 插槽

    插槽,是vue的一个内置组件,代表的内容就是父组件在使用该组件时,直接写在组件标签中的内容,例如 哈哈

    插槽的使用

    一般父组件使用某一子组件时,是直接写 <子组件>,此时页面中显示的就是子组件中固定的内容。如果父组件想要在使用子组件的时候根据需求让子组件显示不同的内容,那就需要用到 插槽。

    具名插槽:就是给 slot 取一个自定义名字,即在中添加一个name行内属性。使用的时候,指定内容是哪个name的 slot 即可。

    
    
    
    

你可能感兴趣的:(web前端,web,vue.js,前端,vscode)