美文网首页
Vue 学习笔记05——组件

Vue 学习笔记05——组件

作者: Laughingg | 来源:发表于2017-12-07 16:10 被阅读18次

    什么是组件

    组件 (Component) 是:自定义的HTML“元素”。 “元素”,有自己特定的样式,属性,功能。

    • 组件可以扩展 HTML 元素,封装可重用的代码。
    • 在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
    • 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

    组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树

    components.png
    
    

    Vue.component( id, [definition] )

    注册或获取全局组件。 注册还会自动使用给定的id设置组件的名称

    // 注册组件,传入一个扩展过的构造器
    Vue.component('my-component', Vue.extend({ /* ... */ }))
    
    // 注册组件,传入一个选项对象 (自动调用 Vue.extend)
    Vue.component('my-component', { /* ... */ })
    
    // 获取注册的组件 (始终返回构造器)
    var MyComponent = Vue.component('my-component')
    

    Vue.extend( options )

    使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

    data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数

    <div id="mount-point"></div>
    
    // 创建构造器
    var Profile = Vue.extend({
      template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
      data: function () {
        return {
          firstName: 'Walter',
          lastName: 'White',
          alias: 'Heisenberg'
        }
      }
    })
    // 创建 Profile 实例,并挂载到一个元素上。
    new Profile().$mount('#mount-point')
    

    在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

    相关文章

      网友评论

          本文标题:Vue 学习笔记05——组件

          本文链接:https://www.haomeiwen.com/subject/gaadixtx.html