_
2023/8/31 08:27:413331

这是我们零基础入门vue3的第二季-组件篇,观看本季教程之前,我们需要学习和大致掌握vue的基础语法。本季教程,将会和大家一起来学习vue中的组件知识,将会涉及到vue的全局组件、局部组件,组件传值, 插槽等等技能点。

组件的概念

通过一张图来了解组件的基本概念。

图片左边是个网页,这个网页可以大致划分为,页面头部,页面主体和侧边栏。在编写vue代码的时候我们就可以分别把它们看成一个个大组件。然后每一个组件里面的内容结构,我也可以把它划分成更小的组件,就像网页左边主体和侧边栏里内容板块,他们是一个个小组件。

通过图的例子分析,我们可以得知vue中一个页面是由多个组件层层拼装而成的,这种开发方式叫做组件化开发。也是学习vue时最重要的知识点之一。

vue根组件组件

理解vue的根组件,我们先来打开vscode,来编写一个hello world基础结构代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
</head>
<script src="https://unpkg.com/vue@next"></script>
<body>
  <div id="app"></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div>{{message}}</div>`
  })
  const vm = app.mount("#app")
</script>
</html>

在浏览器上来预览一下,确保代码能够执行。

然后我们在来看看代码,我们通过Vue.createApp 来创建的了vue实例,其实这时候vue就为我们创建了一个组件,我们把它叫作根组件。Vue.createApp方法里面接受的这个对象其实就是让我们对根组件进行描述,根组件它模板是什么,data里是什么让我们描述一下。然后就创建了根组件。

全局组件

页面上现在比较简单,就显示了一个hello world,我们想给它再添加一行内容显示一个hello vue。那么我们可以直接在根组件template下面添加一个div显示hello vue

 template: `
      <div>{{message}}</div>
      <div>hello vue</div>
    `

那么现在我们页面就得到两行内容,这时候我们想把它改造两个全局组件。看一下全局组件怎么来定义。

app.component("helloWorld",{
    data(){
      return{
        message:'hello world!'
      }
    },
    template:`<div>{{message}}</div>`
  })

  app.component("helloVue",{
    template:`<div>hello vue</div>`
  })

定义好了之后,我们就可以在根组件里面来使用了。

 template: `
      <helloWorld/>
      <helloVue/>
    `

现在我们就实现了把页面上的两行内容拆分成了两个全局组件,虽然看起没有什么意义,那是因为我这里没有涉及任何的业务逻辑。但是在是实战开发中,我们可能会把复杂的业务逻辑和重复使用的功能划分成组件,这样能降低了开发难度,提升代码质量,也方便多人协同合作。

组件的复用性

刚才我们提到,我们会把重复使用的功能封装成组件。那么我们就来看一下组件复用性。我们现在重新来声明一个组件,这个组件相当于计数器,每点击一次自增1。

app.component("btn-counter",{
    data(){
     return{
      count:0
     }
    },
    template:`<button @click="count++">点击+1 {{count}}</button>`
  })

声明好组件之后,就可以使用了,我们直接复制成3个来看一下。

template: `
      <helloWorld/>
      <helloVue/>
      <btn-counter/>
      <btn-counter/>
      <btn-counter/>
    `

在浏览器上预览测一下。当我们点击按钮的时候 按钮上都会显示增加了1 ,三个按钮点击了都只是增加了自己的数字,它们互不干扰,都是一个单独的个体实例。这就是组件复用特性。

总结

刚才我们学习了全局组件的声明和使用,注意它是全局组件,那么什么是全局组件呢。

就是全局注册的组件 ,声明之后可以在任何组件的模板中使用,比如我们可以在hello world 中来使用btn-counter。

app.component("helloWorld",{
    data(){
      return{
        message:'hello world!'
      }
    },
    template:`
      <div>{{message}}</div>
      <btn-counter/>
    `
  })

全局的组件的弊端:少用全局组件,必要时才用,全局组件一旦声明,就全局有效,同时也会占用系统资源。如果一个大型项目中使用了成百上千个全局组件,将会很占用内存,甚至可能导致项目崩溃。

下节课我们就来学习局部组件,使用局部组件来规避这样的弊端。

视频讲解