Vue组件化开发--公共组件的封装
项目中很多模块经常会复用：侧边导航组件、分页、文件下载、项目中常用的 echarts图表的封装（比如折线图、柱状图等），或者一些后台管理、菜单管理中很多可复用组件，表单之类的。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。一般在搭建项目的时候，会创建一个views目录、一个commen目录和一个feature目录。用vue开发的项目，都是采用组件化的思
目录
为什么要封装组件
用vue开发的项目，都是采用组件化的思想开发的。
一般在搭建项目的时候，会创建一个views目录、一个commen目录和一个feature目录。
- views目录中放页面级的组件
- commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等）
- feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）
组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。
使用组件的好处
- 组件是可以复用性的
- 易于维护
- 有封装性，易于使用
- 大型项目中降低组件之间重复性
应用场景
项目中很多模块经常会复用：侧边导航组件、分页、文件下载、项目中常用的 echarts图表的封装（比如折线图、柱状图等），或者一些后台管理、菜单管理中很多可复用组件，表单之类的。
封装组件需要考虑复用性：
- 预留插槽slot, 多次调用如果 子组件视图结构不一样那么就要在子组件template预留好插槽（单个插槽、具名插槽，作用域插槽）
- 考虑到数据传递，定义props 组件接收父组件传递的数据，同时需要注意单向数据流，props不能直接修改，$emit自定义事件，父组件修改
- 业务逻辑不要在子组件中处理，子组件在不同父组件中调用时，业务处理代码不同，切记不要直接在子组件中处理业务，应该子组件 $emit自定义事件，将数据传递给父组件，父组件处理业务。
vue自己封装组件（局部、全局）
封闭性：当在组件定义好外部不能修改；
开放性：将动态内容和组件通讯方式进行传递数据保证组件可扩展性；
Vue组件的三要素
1. props参数
2. slot定制插槽
3. event自定义事件
①全局组件
1）方式：
可以在main.js中注册成全局组件。
import Bread from '@/layout/bread';// 引入
Vue.component("Bread",Bread);// 全局注册2）示例：
引用全局组件my-header
<body>
<div id="main1">
<!-- 正常模板解析的时候，不会将自定义标签解读出来，而是将自己定义组件里的参数解读出来，也就是下面template中的h1标签 -->
<my-header></my-header>
</div>
<div id="main2">
<!-- 自定义组件具有复用性 -->
<my-header></my-header>
</div>
<div id="main3">
<my-header></my-header>
</div>
</body>
注册全局组件my-header
//全局组件：在任何地方，任何方式，任何地点都可以使用的标签组件
vue.component("my-header", {
// h1标签是我们在自定义主键里面写的参数的标签
template: '<h1>标题{{msg}}</h1>',
data(){
return {msg:100}
}
})
new Vue({
el: '#main'
});
new Vue({
el: '#main2'
});
new Vue({
el: '#main3'
});
②局部组件
1）方式：
- 新建一个vue文件
- 在需要使用的组件里引入：import UploadIDCard from “./fillInfo/upIDCard”;
- 注册
components: {
Position: () => import("@/layout/position"),
UploadIDCard
},
注册后，UploadIDCard可以当做一个标签使用。（局部组件）。
2）示例：
局部组件：只是在我们规定的范围之内才会生效。
<body>
<div id="main">
<my-header></my-header>
<my-header></my-header>
</div>
</body>
new Vue({
el: '#main',
components: {
"my-header": {
template: '<h1>标题{{vue}}</h1>'
}
}
})
命名规范：（注意）
- 当使用 kebab-case(中划线命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如<my-component-name>
- 当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。 也就是说<my-component-name>和<MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM(即非字符串的模板) 中使用时只有kebab-case 是有效的。
- 总结：中划线命名在使用时必须保持命名一致，而驼峰命名在使用时既可以用驼峰也可以用中划线。
//中划线 使用语法： <my-component-name>`
Vue.component('my-component-name', { /* ... */ })
//驼峰 使用语法：<my-component-name> `和` <MyComponentName>`都可以
Vue.component('MyComponentName', { /* ... */ })
脚手架vue-cli中的组件
组件之间的数据传递
我们一般通过脚手架vue-cli开发项目，每个 .vue单文件就是一个组件。在父组件中使用import 导入一个子组件，并在components中注册子组件，子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法触发自定义事件传递参数。
父传子（props）
prop 的定义应该尽量详细，至少需要指定其类型
父组件通过属性的形式向子组件传递数据，子组件使用props接收数据，但是通用组件的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则，即：
props: {
propA: Number, // 基础类型检测 (`null` 意思是任何类型都可以)
propB: [String, Number], // 多种类型
propC: { // 必传且是字符串
type: String,
required: true
},
propD: { // 数字，有默认值
type: Number,
default: 100
},
propE: { // 数组/对象的默认值应当由一个工厂函数返回
type: Object,
default: function () {
return { message: 'hello' }
}
},
propF: { // 自定义验证函数
validator: function (value) {
return value > 10
}
}
}
由于存在一个单项数据流的问题，父组件传递给子组件的数据不要直接修改，因为会将父组件中的数据也修改，当这个数据也传入其他组件的时候就会出问题了。vue2.5已经针对 props 做出优化，这个问题已经不存在了 如果一定需要有这样的操作，可以这么写：
let copyData = JSON.parse(JSON.stringify(this.data))为什么不直接写 let myData = this.data 呢？ 因为直接赋值，对于对象和数组而言只是浅拷贝，指向的是同一个内存地址，其中一个改变另一个也会改变。而通过 JSON颠倒转换之后，实现了深拷贝，则可以互不影响。
<!-- 父组件 -->
<template>
<div>
<my-child :parentMessage="parentMessage"></my-child>
</div>
</template>
<script>
import MyChild from '@components/common/MyChild'
export default {
components: {
MyChild
},
data() {
return {
parentMessage: "我是来自父组件的消息"
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<span>{{ parentMessage }}</span>
</div>
</template>
<script>
export default {
props: {
parentMessage: {
type: String,
default: '默认显示的信息'
// require: true // 必填
}
}
}
</script>
通过 $on 传递父组件方法
通过$on传递父组件方法是组件通信中常用的方法传递方式。它可以与通过props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表现出了调用关系
<!-- 父组件 -->
<template>
<div>
<my-child @childEvent="parentMethod"></my-child>
</div>
</template>
<script>
import MyChild from '@components/common/MyChild'
export default {
components: {
MyChild,
},
data() {
return {
parentMessage: '我是来自父组件的消息',
}
},
methods: {
parentMethod() {
alert(this.parentMessage)
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<h3>子组件</h3>
</div>
</template>
<script>
export default{
mounted() {
this.$emit('childEvent')
}
}
</script>
$parent获取父组件然后使用父组件中的数据（不推荐）
准确来说这种方式并不属于数据的传递而是一种主动的查找。父组件并没有主动的传递数据给子组件，而是子组件通过与父组件的关联关系，获取了父组件的数据。
该方法虽然能实现获取父组件中的数据但是不推荐这种方式，因为vue提倡单向数据流，只有父组件交给子组件的数据子组件才有使用的权限，不允许子组件私自获取父组件的数据进行使用。在父与子的关系中子应当是处于一种被动关系
通过$emit传递父组件数据 (推荐)
子组件向父组件中传递数据
子组件向父组件中传递数据：触发父组件方法,并传递参数data到父组件
与父组件到子组件通讯中的
$on配套使用，可以向父组件中触发的方法传递参数供父组件使用
<!-- 父组件 -->
<template>
<div>
<my-child @childEvent="parentMethod"></my-child>
</div>
</template>
<script>
import MyChild from '@components/common/MyChild'
export default {
components: {
MyChild
},
data() {
return {
parentMessage: '我是来自父组件的消息'
}
},
methods: {
parentMethod({ name, age }) {
console.log(this.parentMessage, name, age)
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<h3>子组件</h3>
</div>
</template>
<script>
export default {
mounted() {
this.$emit('childEvent', { name: 'zhangsan', age: 10 })
}
}
</script>
refs获取
可以通过在子组件添加ref属性，然后可以通过ref属性名称获取到子组件的实例。准确来说这种方式和this.$parent
一样并不属于数据的传递而是一种主动的查找。尽量避免使用这种方式。因为在父子组件通信的过程中。父组件是处于高位是拥有控制权，而子组件在多数情况下应该为纯视图组件，只负责视图的展示和自身视图的逻辑操作。对外交互的权利应该由父组件来控制。所以应当由父组件传递视图数据给子组件，子组件负责展示。而子组件的对外交互通过$emit触发父组件中相应的方法，再由父组件处理相应逻辑。
<!-- 父组件 -->
<template>
<div>
<my-child ref="child"></my-child>
</div>
</template>
<script>
import MyChild from '@components/common/MyChild'
export default {
components: {
MyChild
},
mounted() {
console.log(this.$refs['child'].getData());
}
}
</script>
<!-- 子组件 -->
<script>
export default {
methods: {
getData() {
// do something...
}
}
}
</script>
组件样式修改 样式穿透
sass中语法
有些像sass之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/操作符取而代之——这是一个>>>的别名，同样可以正常工作
<style scoped>
.a /deep/ .b { /* ... */ }
</style>插件使用：slot
一个通用组件，往往不能够适应所有应用场景，所以在封装组件的时候只需要完成组件 80% 的功能，剩下的 20% 让父组件通过 solt 解决。solt 起到一个占位的作用，给按钮的设置提前预留一个位置，然后在父组件中写入按钮即可。
在开发通用组件的时候，只要不是独立性很强的组件最好是都加一个slot。并且，开发过程中，常常需要在子组件内添加新的内容，这时候可以在子组件内部留一个或者多个插口，然后在调用这个子组件的时候加入内容，添加的内容就会分发到对应的 slot 中：
父组件
<head-component>
<h2>不具名插槽</h2>
<h2 slot="s1">这里对应的是s1插口</h2>
<h2 slot="s2">这里对应的是s2插口</h2>
</head-component>
子组件
<template>
<div class="headComponent">
<h3>这是一个头部组件</h3>
<slot></slot>
<slot name="s1"></slot>
<slot name="s2"></slot>
</div>
</template>
slot 中还可以作为一个作用域，在子组件中定义变量，然后在父组件中自定义渲染的方式：（项目中使用的比较多，vue+elementUI中ajax获取数据显示在表格中，很多时候每一条数据不是直接显示的，需要做一些额外的处理）
子组件
<template>
<div class="headComponent">
<h3>这是一个头部组件</h3>
<slot name="head" v-for="head in heads" :text="head.text"></slot>
</div>
</template>
父组件
<head-component>
<template slot="head" scope="props">
<li> {{ props.text }} </li>
</template>
</head-component>
参考链接：vue组件化开发_star@星空的博客-CSDN博客
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
8
0- 0
已为社区贡献6条内容
所有评论(0)