VUE3基础入门教程-组件篇-码农小朱

这是我们零基础入门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/>
    `
  })

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

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

视频讲解