本篇文章为大家展示了然后深入了解vue组件中的prop、slot和event，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
10年积累的网站设计制作、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先制作网站后付款的网站建设流程，更有大安市免费网站建设让你可以放心的选择与我们合作。
不管多么复杂的组件，一定是由属性prop、事件event和插槽slot组成的。
问题引入
是否遇到以下这种场景：开发中，遇到一些特别常见的展示或功能，想抽离并封装成一个独立组件，然后共享给其他开发人员使用。
要想封装一个组件，我们先了解组件的基本组成，不管多么复杂的组件，一定是由属性prop、事件event和插槽slot组成的。编写组件的过程就是设计这三个API的过程。同样如果想阅读别人编写的组件，也可以通过这三个API去快速理解。
那么这三个API：prop、event、slot，我们该怎么写呢？
属性prop
prop是用来定义该组件可接受哪些属性。
阅读vue官网，我们知道prop可以使用数组或对象的写法。很多人为了方便，直接使用prop的数组写法，这是不严谨的，在写通用组件时，我们要尽可能使用prop的对象写法。
大家可以看以下代码：
app.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default() {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator(value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].includes(value)
}
},
// 具有默认值的函数
propG: {
type: Function,
// 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
default() {
return 'Default function'
}
}
}
})
相信大家都可以看出来，prop使用对象的写法，我们可以验证传入进来的属性是否正确，可以及时给予提示，这在我们写独立组件时特别有用。
由于vue要遵循单向数据流原则，我们不要尝试去修改prop值，需采用其他方案。
修改prop值常见方案
1、prop传递初始值，赋值给data
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
}
}
2、通过计算属性来接收prop值
props: ['size'],
computed: {
normalizedSize() {
return this.size.trim().toLowerCase()
}
}
插槽slot
插槽slot是用来分发组件的内容，如
Add todo
当渲染时，会被替换成Add todo，如
Add todo
这是slot的最基础用法，衍生而来的有具名插槽，顾名思义就是给区分插槽，可以设置多个插槽，如
除了这三个API，组件还有其他内容，比如生命周期，混入，计算属性等等，但是针对组件开发来说，这三个API已足够了。掌握了这三个API，剩下的就是解耦组件的交互逻辑，尽量分发不同的功能到不同的子组件里，然后建立组件树。
上述内容就是然后深入了解vue组件中的prop、slot和event，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
