首页 > js教程 > 正文

vue.js组件中全局注册和局部注册的简单介绍以及实例分析

原创 2018-08-11 16:15:53 0 644
本篇文章给大家带来的内容是关于vue.js组件中全局注册和局部注册的简单介绍以及实例分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1、全局注册实例(按照官网的例子下面是代码)

  <div id="app">
     <com-btn></com-btn>
     <com-btn></com-btn>
 </div>
<script>
        Vue.component('com-btn',{
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click='change'>点我{{num}}次</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        })
       var vm = new Vue({
           el:'#app',
           data:{

           },
           
       })
    </script>

我们在注册一个组件的时候需要给他起一个名字比如com-btn,从上面的代码我们可以看见

Vue.component('my-component-name', { /* ... */ })

这个组件名字就是我们注册的这个组件com-btn的第一个参数.这个组件就是全局注册的,在他们注册之后,我们可以用在任何新创建的vue根实例(new Vue)里面。

值得注意的是所有组件必须写在根实例的前面才会生效,

2局部祖册的实例

<script>
        var childcom ={
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click='change'>点我{{num}}次</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        }
       var vm = new Vue({
           el:'#app',
           data:{

           },
           components:{
               'com-btn':childcom,//调用这个组件
           }
       })
    </script>

局部注册的好处 就是当你使用的是webpack这样的构建系统时,如果是用全局注册的这种方法注册的组件,那么当你不使用某一个组件的时候,它仍然会存在最终的构建结果之中,这就增加的无谓的js下载。

所以我们可以通过一个简单的js对象来注册组件

var ComponentA = { /* ... */ }

在需要使用这个组件时, 你只需要在你的你的根实例里面去调用这个定义的组件即可。

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

值得注意的是根实例的属性名字是components,千万不要忘记s。组件中的其他属性和实例的一样但是data必须是一个函数。

对于components对象中的每个的属性来说就是自定义组件的名字,属性值就是这个组件的选项对象。

局部注册的组件在其子组件中是不可用的,如果你希望componentA在componentB中可以使用那你需要下面这样写法:

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

相关推荐:

vue全局注册和局部注册使用详解

vue组件注册表单

以上就是vue.js组件中全局注册和局部注册的简单介绍以及实例分析的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:vue 组件
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • vue.js组件中全局注册和局部注册的简单介绍以及实例分析
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    • PeterZhu
    • 2017-03-20 22:47:17
    • 点击数(111586)

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    • PeterZhu
    • 2017-05-16 12:03:57
    • 点击数(109590)

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    • PeterZhu
    • 2017-03-13 10:15:11
    • 点击数(84114)

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • PeterZhu
    • 2017-07-24 16:48:56
    • 点击数(83262)

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    • 不言

      全栈工程师

    • 认证0级讲师
    • 6320篇
      文章总数
    • 644
      文章总浏览数

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节