Vue 组件分类、局部注册和全局注册

文章目录

- - - 背景知识
    - 组件分类
    - 安装 vue-cli
    - 示例
    - - 设置组件局部注册
      - 设置组件全局注册

背景知识

开发 Vue 的两种方式：

核心包传统开发模式：基于 html / css / js 文件，直接引入核心包，开发 Vue。
工程化开发模式：基于构建工具（例如：webpack ) 的环境中开发 Vue。

一个页面可以拆分成一个个组件，每个组件有着自己独立的结构（html部分）、样式（css部分）、行为（javascript）。好处是便于维护，利于复用。

组件分类

组件分为根组件与普通组件。
在这里插入图片描述

App.vue 为根组件，包含结构、样式、行为3部分。结构通过 <template> 标签提供，样式通过 <style> 标签提供，行为通过 <script> 标签提供。结构部分有且只能有 1 个根元素。
当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)。
无论是局部注册还是全局注册，应用时当成 html 标签即可，格式为：

<组件名></组件名>

组件名命名需要遵守大驼峰命名法，如 componentName。
技巧：一般都用局部注册，如果发现确实是通用组件，再抽离到全局。

安装 vue-cli

vue-cli 是 Vue 官方提供的一个全局命令工具。可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子，其内部集成了 webpack 配置。

vue-cli 使用步骤：

全局安装 (一次) ： npm i @vue/cli -g
查看 Vue 版本：vue --version
创建项目架子：vue create project-name（项目名-不能用中文）
启动项目： npm run serve（找package.json）

在这里插入图片描述

示例

我们把之前的watch案例拆分成组件格式。原 html 文件为：

<!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>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
      }
      #app {
        padding: 10px 20px;
      }
      .box {
        display: flex;
      }
      textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
      }
      textarea:hover {
        border: 1px solid #1589f5;
      }
      .tip-box span {
        flex: 1;
        text-align: center;
      }
      .query span {
        font-size: 18px;
      }

      .input-wrap {
        position: relative;
      }
      .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
      }
      .input-wrap i {
        font-size: 20px;
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="words.cat"></textarea>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      
      const app = new Vue({
        el: '#app',
        data: {
          words: {
            cat : '奶牛猫',
            dog : '哈士奇',
          }
        },
        watch: {
          'words.cat' : {
            deep : true,
            immediate : true,
            handler (newvalue) {
              console.log(newvalue)
            }
          }
        }
      })
    </script>
  </body>
</html>

执行 vue create vue-test1，生成 vue-test1 项目，在 components 目录下创建 cat.vue 和 dog.vue 单文件组件。我们准备将 cat.vue 设置为局部注册的组件，dog.vue 设置为全局注册的组件。整个项目的结构如下图：
在这里插入图片描述

设置组件局部注册

cat.vue 的内容如下，需要注意原 html 文件的 data 对象变成了现在的 data 函数。

<template>
  <div class="box">
    <div class="input-wrap">
      <textarea v-model="words.cat"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  name: "cat",
  data() {
    return {
      words: {
        cat: '奶牛猫',
        dog: '哈士奇',
      }
    }
  },
  watch: {
    'words.cat': {
      deep: true,
      immediate: true,
      handler(newvalue) {
        console.log(newvalue)
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 18px;
}

#app {
  padding: 10px 20px;
}

.box {
  display: flex;
}

textarea {
  width: 300px;
  height: 160px;
  font-size: 18px;
  border: 1px solid #dedede;
  outline: none;
  resize: none;
  padding: 10px;
}

textarea:hover {
  border: 1px solid #1589f5;
}

.tip-box span {
  flex: 1;
  text-align: center;
}

.query span {
  font-size: 18px;
}

.input-wrap {
  position: relative;
}

.input-wrap span {
  position: absolute;
  right: 15px;
  bottom: 15px;
  font-size: 12px;
}

.input-wrap i {
  font-size: 20px;
  font-style: normal;
}
</style>

在根组件 App.vue 中使用 import 语句引入 cat 组件，然后在 components 模块注册组件，最后在 template 结构中应用组件，整个过程就是一个完整的局部注册。 App.vue 内容为：

<template>
  <div id="app">
    <cat></cat>
    <dog></dog>
  </div>
</template>

<script>
import cat from '@/components/cat.vue'

export default {
  name: 'App',
  components: {
    cat
  }
}
</script>

<style>

</style>

局部注册意味着只能在注册的组件内使用该组件，而全局注册意味着可以在所有组件内使用。

设置组件全局注册

设置组件全局注册，需要首先创建 .vue 文件，然后在 main.js 中进行全局注册。dog.vue 内容为：

<template>
  <h3>哈士奇</h3>
</template>

<script>
export default {
  name: "dog"
}
</script>

<style scoped>
</style>

在 main.js 中，首先使用 import 语句导入需要全局注册的组件，然后再调用 Vue.component 进行全局注册。注册之后，就可以在其他组件使用 dog 组件了，本例中，我们在 App.vue 中引入了 dog 组件。main.js 的内容为：

import {createApp} from 'vue'
import App from './App.vue'


import dog from '@/components/dog.vue'

const app = createApp(App)


app.component('dog', dog)
app.mount('#app')