Vue 组件全局注册与局部注册

最新推荐文章于 2025-04-06 19:26:21 发布

原创最新推荐文章于 2025-04-06 19:26:21 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

VUE 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Vue.js中组件的注册与使用，包括局部注册和全局注册。在局部注册中，创建了一个名为`fot`的组件，该组件含有一个`count`数据属性和一个点击按钮来增加计数。而在全局注册中，我们创建了`hed`组件，它引用了两次局部注册的`fot`组件。文章强调了组件数据函数形式的重要性，以及组件定义需位于Vue实例之前。此外，还指出了局部组件不能直接在HTML中引用，必须通过全局注册的组件来引入。

实现以下效果

Html

<div id='app'></div>

       //局部注册
        let fot={
          data(){
            return{
              count:0,
            }
          },
          template:'<div>foot   {{count}}<button @click="count++">点击</button></div>',
          };

        //全局注册
        Vue.component('hed',{
           template:'<div>bbbbb<fot></fot><fot></fot></div>',
           components:{fot} //局部注册
        })


        let a=new Vue({
          el:'#app',
          data:{},
          template:'<div>aaaa<hed></hed></div>',
          
        })

注意：1.局部注册组件需要在全局注册组件中引用，html内无法直接引用局部注册组件

局部注册组件写法：

        //局部注册
        let fot={
          template:'<div>foot</div>',
          };

全局组件引用局部组件写法：

        //全局注册
        Vue.component('hed',{
           template:'<div>bbbbb<fot></fot><fot></fot></div>',
           components:{fot} //局部注册
        })

2.组件中的data要以函数的形式书写，为了组件多次引用时数据不会相互干扰（全局组件与局部组件均是这种写法），根节点中的data可以写成对象形式不用写成function形式，因为根组件不会被复用

写法如下：

 data(){
            return{
              count:0,
            }
          }

组件代码一定要写在根节点声明代码的上面，也就是vue.component的代码段要写在 const=new Vue({})代码段的上面