>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 8356 个阅读者 刷新本主题
 * 贴子主题:  【Vue.js技术专题】注册全局组件和局部组件 回复文章 点赞(0)  收藏  
作者:sunweiqin    发表时间:2022-08-29 17:47:59     消息  查看  搜索  好友  邮件  复制  引用

本文参考孙卫琴,杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

普通Vue组件按照使用范围,可以分为两种:
(1)全局组件:通过Vue应用实例的component()方法注册,可以直接被其他Vue组件访问。
(2)局部组件:只有父组件通过components选项注册了一个局部组件,父组件才能访问该局部组件。

无论是全局组件还是局部组件,都具有data、methods、computed和watch等选项,而且和根组件一样,也具有类似的生命周期以及生命钩子函数。

1.注册全局组件

全局组件可以直接被其他Vue组件访问。例程1的global.html通过Vue应用实例的component()方法注册了一个名为“counter”的全局组件,在根组件的模板中,插入了三个<counter>组件,由此可见,<counter>组件可以被多次重用。

例程1  global.html

    <div id="app">
      <p>计数器1:<counter></counter> </p>
      <p>计数器2:<counter></counter> </p>
      <p>计数器3:<counter></counter> </p>
    </div>

    <script>
      const app=Vue.createApp({ })

      //注册一个名为counter的组件
      app.component('counter', {
        data() {
          return {   count: 0  }
        },
        template: '<button @click="count++">{{ count }} 次</button>'
      })
      app.mount('#app')
   </script>

通过浏览器访问global.html,会得到如图1所示的网页。多次点击网页上的三个按钮,会看到每个计数器的取值都不一样。这是因为每个<counter>组件都有独立的count变量。
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
图1  global.html的网页

在例程2的globalscope.html中,有两个全局组件<wrapper>和<counter>。<counter>组件插入到<wrapper>组件的模板中,<wrapper>组件又插入到根组件的模板中。

例程2  globalscope.html

    <div id="app">
      <wrapper></wrapper>
    </div>

    <script>
      const app=Vue.createApp({ })

      //定义一个名为counter的组件
      app.component('counter', {
        data() {
          return {   count: 0  }
        },
        template: '<button @click="count++">{{ count }} 次</button>'
      })

      //定义一个名为wrapper的组件
      app.component('wrapper', {
        template: `<p>计数器1:<counter></counter></p>
                     <p>计数器2:<counter></counter></p>
                     <p>计数器3:<counter></counter></p>`
      })
      app.mount('#app')
   </script>

在JavaScript中,单行字符串可以用符号“'”或“`”来引用。如果是多行字符串,只能用符号“`”来引用。例如globalscope.html中<wrapper>组件的template选项的模板字符串就用符号“`”来引用。

2.注册局部组件

在介绍局部组件之前,先分析全局组件的优势和劣势,从而揭示Vue引入局部组件的必要性和它的优势。全局组件可以直接插入到其他组件的模板中,这使得其他组件可以很方便地访问全局组件。但是全局组件也有一个弊端:当浏览器访问一个网页时,会把所有全局组件的代码也下载到客户端。假定某个网页并不包含所有的全局组件,那么下载所有全局组件的代码是多余的,会给网络传输带来额外的负担,降低网站的访问性能。

为了克服全局组件的弊端,Vue引入了局部组件,局部组件只有在需要被访问的情况下才会下载到客户端,这样就能减轻网络的传输负荷,提高网站的访问性能。

定义以及注册局部组件的步骤如下。
(1)定义局部组件的内容,例如以下代码定义了三个变量,它们分别表示三个局部组件的内容:

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

(2)在需要访问局部组件的父组件中通过components选项来注册局部组件。例如以下代码在根组件中注册了三个局部组件,这三个局部组件仅对根组件可见,因此根组件就是这三个局部组件的父组件:

const app = Vue.createApp({
  components: {   //根组件的components选项
    'component-a': ComponentA,
    'component-b': ComponentB,
    'component-C': ComponentC,
  }
})

例程3的local.html演示了局部组件的基本用法。在local.html中,根组件作为父组件,注册了一个子组件“counter”,在根组件的模板中就能使用这个<counter>子组件。

例程3  local.html

    <div id="app">
      <p>计数器1:<counter></counter></p>
      <p>计数器2:<counter></counter></p>
      <p>计数器3:<counter></counter></p>
    </div>

    <script>
      //定义一个局部组件的内容
      const localComponent={
        data() {
          return {   count: 0  }
        },
        template: '<button @click="count++">{{ count }} 次</button>'
      }

      const app=Vue.createApp({
        components: {  //注册counter局部组件
          'counter' : localComponent  
        }
      })

      const vm=app.mount('#app')
   </script>

局部组件只有注册到一个父组件中,才能被这个父组件访问。例如在以下代码中,组件ComponentBase中注册了组件ComponentSub,组件ComponentBase就是组件ComponentSub的父组件,在组件ComponentBase的模板中就能插入组件ComponentSub:

const ComponentSub = {
  /* ... */
}

const ComponentBase = {
  components: {  //注册ComponentSub组件
    'ComponentSub': ComponentSub
  },
  template: '<ComponentSub></ComponentSub>'
}

在例程4的localscope.html中,<counter>是局部组件,<wrapper>是全局组件。

例程4  localscope.html

    <div id="app">
      <wrapper />
    </div>

    <script>
      //定义一个局部组件的内容
      const localComponent={……}

      const app=Vue.createApp({
        components: {  //注册counter局部组件,仅对根组件可见
          'counter' : localComponent  
        }
     })
    
      //定义一个名为wrapper的全局组件
      app.component('wrapper', {
        template: `<p>计数器1:<counter></counter> </p>
                     <p>计数器2:<counter></counter> </p>
                     <p>计数器3:<counter></counter> </p>`
      })
      const vm=app.mount('#app')
   </script>

尽管在根组件中注册了<counter>组件,但是在<wrapper>组件中并没有注册<counter>组件。<wrapper>组件的模板试图插入<counter>组件,这会导致Vue在编译<wrapper>组件的模板时产生错误。修改这个错误的方法是在<wrapper>组件中先注册<counter>组件:

      app.component('wrapper', {
        components: {  //注册counter局部组件,仅对<wrapper>组件可见
          'counter' : localComponent  
        },  
        ……
      })

程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->内部类
  JavaWeb开发-->JSP中使用JavaBean(Ⅰ)
  JSP与Hibernate开发-->Spring、JPA与Hibernate的整合
  Java网络编程-->Socket用法详解
  精通Spring-->创建综合购物网站应用
  Vue3开发-->虚拟DOM和render()函数
  【Vue.js技术专题】Vue组件的数据监听
  【Vue.js技术专题】路由导航中抓取数据
  【Vue.js技术专题】CSS中DOM元素的过渡模式
  【Spring Cloud Alibaba专题】GateWay的内置断言工厂
  【Spring Cloud Alibaba专题】Nacos配置属性的持久化
  向小伙伴们推荐我所创作前后端编程书籍的学习顺序
  【Spring专题】用Spring框架进行文件下载
  【Spring专题】通过JPA API实现Repository接口
  探讨IT技术作者的素养
  从《精通Spring》和《精通Vue.js》的写作分享学习新技术的经...
  【持久化专题】Hibernate的配置文件
  【JavaWeb专题】在JavaWeb应用中对客户请求的异步处理
  IT技术书写作技巧分享:慎用概念和术语
  【Java基础编程专题】Java基本类型和引用类型的三个区别
  我的计算机书籍创作心得
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。