文章目录
- 背景知识
- 组件分类
- 安装 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')
在 vue-test1 项目目录下，执行 npm run serve 语句，项目运行：
打开 localhost:8080，显示
经过简单输入测试，与原 html 的功能一致。
