Vue组件的创建与注册

组件优势:

  • 组件的出现,就是为了拆分Vue实例的代码量的,将不同的功能模块用不同的组件表示出来,将来需要什么样的功能,就可以去调用对应的组件即可
  • 组件可以扩展HTML元素,封装可重用的HTML代码,使用时可以将组件看作自定义的HTML元素。

组件化和模块化的不同

  • 模块化: 从代码逻辑的角度进行划分,方便代码分层开发,保证每个功能模块的职能单一 (node模块化)
  • 组件化: 从UI界面的角度进行划分的;前端的组件化,能方便UI组件的重用;(vue组件化)

Vue.js的组件的使用有3个步骤:

  • 创建组件构造器:Vue.extend 方法
  • 注册组件:Vue.component方法
  • 使用组件:在Vue实例挂载的范围内使用

1、全局组件定义的三种方式

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

    <div id="app">
     
        <my-com1>my-com1> //使用组件,直接调用组件名即可
    div>
    
    // 使用 Vue.extend 来创建组件构造器
    var com1 = Vue.extend({
        template: '

    这是使用 Vue.extend 创建的组件

    '
    // 通过template属性,指定组件要展示的HTML结构 }) Vue.component('myCom1', com1) // Vue.component('组件名称', 创建出来的组件模板对象) // 如果使用 Vue.component 定义全局组件的时候,组件名称使用了 驼峰命名,则在引用组件的时候, // 需要把 大写的驼峰改为小写的字母,同时,两个单词之前,使用 - 链接; // 如果不使用驼峰,则直接拿名称来使用即可; Vue.component('mycom1', com1) //或者直接如下(合并为一步): Vue.component('myCom1', Vue.extend({ template: '

    这是使用 Vue.extend 创建的组件

    '
    }))
  2. 直接使用 Vue.component 方法:
    省去了 Vue.extend(),直接写对象,简单,但无智能提示

    <div id="app">
        <mycom2>mycom2>  
    div>
    
    <script>
        // 注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
        Vue.component('mycom2', {
            template: '

    这是直接使用 Vue.component 创建出来的组件

    '
    }) // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {} });
    script>
  3. 使用 script标签或者template 元素,定义组件的HTML模板结构

    <div id="app">
        <mycom3>mycom3>
    div>
    
    
    <template id="tmpl">
        <div>
            <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的智能提示和高亮h1>
        div>
    template>
    
    <script>
        Vue.component('mycom3', {  //全局注册
            template: '#tmpl'  //把template写在外面
        })
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    script>
    

和使用方式是一样的,使用template相对简单些
注意:使用

你可能感兴趣的:(Vue)