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')