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

上节课我们学习了全局组件，这节课我们讲一下局部组件。局部组件概念就好比局部变量，只在一个区域内有效。局部组件就在局部作用域注册了才能使用，比起全局组件有一个好处就是按需注册只有注册了之后才占用系统资源，不像全局组件，全局注册了，不管是否使用都在占用系统资源。

准备动作

打开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>

创建局部组件

怎么来创建一个组件呢，就好比我们声明了一个对象，这个对象编写这个组件的描述信息。

const Counter = {
    data(){
      return{
        count:0
      }
    },
    template:`<div>{{count}}<button @click="count++" >加1</button></div>`
  }

注册组件

组件创建好了，我们就可以来注册使用了，在根组件中，我们使用components属性来注册组件，它接收的也是一个对象，方便我们注册多个组件。注册之后就可以在根组件template中使用了。

const app = Vue.createApp({
    components:{
      Counter
    },
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `
      <div>
        {{message}}
        <Counter/>
      </div>
    `
  })

components:{Counter} 这种简写方式，是ES6中的语法等价于

components:{Counter:Counter} 这我就不多说了。

现在我们就可以打开浏览器来看一下效果了。

大驼峰命名法

为了编写的代码更加规范，在为组件命名时我们都是采用大驼峰命名的，多单词组成的名称每一个单词第一个字幕大写，首字母也要大写方便我们区分组件与html原始标签。

 const ArticelTitle = {
    template:`<h3>花儿为什么这样红</h3>`
  }

如果你觉得驼峰不好看的话，在注册组件和使用组件的时候，你还可以使用 “-” 来代替单词首字母大写。

components:{
      Counter,
      ArticelTitle:ArticelTitle,
      'article-title':ArticelTitle
    },

template: `
      <div>
        {{message}}
        <Counter/>
        <ArticelTitle/>
        <article-title/>
      </div>
    `

到这里我们这节课的所有内容就学习完了，拜拜。

视频讲解