大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
Vue组件的三要素
1. props参数
2. slot定制插槽
3. event自定义事件
基本组件开发
创建一个.vue文件，其中包含template、script以及style：
<template>
<div class="headComponent">
{
{
msg }}
</div>
</template>
<script>
export default {
props:['data','type'],
inheritAttrs: false,
data(){
return{
msg:'',
}
}
}
</script>
<style scoped>
</style>
至此就完成一个基本的组件了，要想使用这个组件，就需要在其他js文件中引入并注册：
import Head from '../components/headComponent.vue'
组件之间的数据传递
1. 父组件向子组件中传递数据
父组件通过属性的形式向子组件传递数据，子组件使用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颠倒转换之后，实现了深拷贝，则可以互不影响。
2. 子组件向父组件中传递数据
子组件向父组件中传递数据：触发父组件方法,并传递参数data到父组件
handleSubmit(data){
this.$emit('submitToParent', data)
}
父组件如何拿到子组件传递过来的数据？
<header @submitToParent="parentSubmit"></header>
methods: {
parentSubmit(data){
// 父组件的业务逻辑
}
}
3. 使用slot
一个通用组件，往往不能够适应所有应用场景，所以在封装组件的时候只需要完成组件 80% 的功能，剩下的 20% 让父组件通过 solt 解决。比如：某一个公共组件中有两个按钮，一个是“新增”，一个是“删除”，但是在另外的场景中使用这个组件时，两个按钮需要做的事情是不一样的，比如是“查看”和“修改”。所以，我们在封装组件的时候就不要直接写按钮了，而是在合适的位置放置一个slot，其实是一个占位的作用，给按钮的设置提前预留一个位置，然后在父组件中写入按钮即可。
子组件：
<div class="child-btn">
<!-- 具名插槽 -->
<slot name="button"></slot>
<!-- 匿名插槽（每个组件只能有一个） -->
<slot><slot>
</div>
父组件：
<child>
<!-- 对应子组件中button的插槽 -->
<button slot="button">slot按钮</button>
</child>
在开发通用组件的时候，只要不是独立性很强的组件最好是都加一个slot。并且，开发过程中，常常需要在子组件内添加新的内容，这时候可以在子组件内部留一个或者多个插口，然后在调用这个子组件的时候加入内容，添加的内容就会分发到对应的 slot 中：
子组件：
<template>
<div class="headComponent">
<h3>这是一个头部组件</h3>
<slot></slot>
<slot name="s1"></slot>
<slot name="s2"></slot>
</div>
</template>
父组件：
<head-component>
<h2>不具名插槽</h2>
<h2 slot="s1">这里对应的是s1插口</h2>
<h2 slot="s2">这里对应的是s2插口</h2>
</head-component>
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>
上述例子中，首先在子组件添加 slot，并在子组件中定义了数组变量 heads 然后在父组件中以作用域 template 添加内容，其中 scope 是固有属性，它的值对应一个临时变量 props 而 props 将接收从父组件传递给子组件的参数 heads。
参考链接：
Vue组件封装指南
封装Vue组件的一些技巧
vue + elementui 中的弹窗组件封装成公共组件
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/190174.html原文链接：https://javaforall.net
