美文网首页
Vue - 组件(Component)

Vue - 组件(Component)

作者: 秀萝卜 | 来源:发表于2022-02-25 16:04 被阅读0次

    https://www.jianshu.com/p/f5eb996f5e2a

    一、什么是组件(Component)?

    组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可以重用的代码。在较高层面上,组件是自定义元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用is特性进行了扩展的原生HTML元素。

    所有Vue组件同事也都是Vue实例,所以可以接受相同的选项对象(除了一些根级特有的选项)并且提供相同的生命周期钩子。

    二、使用组件

    1.全局组件

    我们知道,创建一个Vue实例可以:

    new Vue({
      el: '#some-element',
      // 选项
    })
    
    

    全局注册组件,可以使用Vue.component(tagName, options)。 比如:

    Vue.component('my-component', {
      // 选项
    })
    
    

    请注意,对于自定义标签的命名 Vue.js 不强制遵循 W3C 规则 (小写,并且包含一个短杠),尽管这被认为是最佳实践。

    组件在注册之后,便可以作为自定义元素:<my-component></my-component>使用了。
    注意确保在初始化根实例之前注册组件:

    在初始化根实例之前注册组件这句话就是指的是:

    Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })
    
    var vm = new Vue({
      el: '#box'
    })
    
    

    这样的顺序是对的,而

    var vm = new Vue({
      el: '#box'
    })
    
    Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })
    
    

    这样是错的。

    <div id="example">
      <my-component></my-component>
    </div>
    
    
    // 注册
    Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })
    
    // 创建根实例
    new Vue({
      el: '#example'
    })
    
    

    我们要注意,一般选项中需要添加template,就是HTML的构造。

    渲染为:

    <div id="example">
      <div>A custom component!</div>
    </div>
    

    作者:廖马儿
    链接:https://www.jianshu.com/p/f5eb996f5e2a
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    相关文章

      网友评论

          本文标题:Vue - 组件(Component)

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