一幅长文细学Vue（四）——组件基础（下）
4 组件基础（下）
摘要
在本文中年我们会了解什么是props，怎么利用props在父组件和子组件之间传递数据；什么是计算属性，还有什么是事件。
声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码，main.js文件的代码通常不贴出，如果感兴趣可以前往代码仓库获取
作者：来自ArimaMisaki创作
4.1 props验证
4.1.1 什么是props验证
说明：如果你想要对外界传入组件的数据进行合法性验证，则原先的props选项使用数组写法没有这个功能，为此，我们改用对象类型的props选项写法。props对象中的键为组件使用者传入数据，值为传入数据的数据类型。
4.1.2 多个可能的类型
说明：对象类型的props选项提供了多种数据验证方案，如
- 基础的类型检查：直接为组件的prop属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据
- 多个可能的类型：如果某个prop属性值得类型不唯一，此时可以通过数组的形式，为其指定多个可能的属性值
- 必填项校验：prop属性可以是一个prop对象，对象中存在required和type，如果开启required为true，则type对应的数据类型必须满足，否则控制台报错
- 属性默认值：prop对象还可以存在default，表示该prop属性默认的值。
- 自定义验证函数：prop对象中可以自定义一个验证函数，从而对prop属性的值进行更加精确的控制。
<template>
<div>
<p>数量：{{count}}</p>
<p>状态：{{state}}</p>
</div>
</template>
<script>
export default {
name:'MyCount',
props:{
// 必填项校验
count:{
type:Number, // 基础类型校验
required:false,
default:100 // 默认值
},
state:Boolean,
type:{
validator(value){
return ['success','warning','danger'].indexOf(value) !== -1
}
}
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
<template>
<div>
<h1>App根组件</h1>
<hr>
<MyCount :state="true" type="success"></MyCount>
</div>
</template>
<script>
import MyCount from './Count.vue';
export default {
name:'MyApp',
components:{
MyCount,
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
4.2 计算属性
4.2.1 什么是计算属性
说明：我们可以向外暴露computed选项，其可写作对象形式。对象中的每一项都是一个函数，它可以实时监听data中数据的变化，并且return一个计算后的新值。
<template>
<div>
<input type="text" v-model.number = "count">
<p>{{count}}乘以2得：{{plus}}</p>
</div>
</template>
<script>
export default {
name:'MyCounter',
data(){
return {
count:1,
}
},
computed:{
plus(){
return this.count*2;
}
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
<template>
<div>
<h1>App根组件</h1>
<hr>
<my-counter></my-counter>
</div>
</template>
<script>
import MyCounter from './MyCounter.vue';
export default {
name:'MyApp',
components:{
MyCounter,
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
4.2.2 计算属性和方法
疑问：把方法定义在methods节点上不是一样吗，为何非要定义在computed节点上？
解释：相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行计算，因此计算属性的性能更好。
4.3 自定义事件
4.3.1 自定义组件概述
说明：在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。
使用步骤：
- 声明自定义事件：必须事先在emits节点中声明
- 触发自定义事件：通过this.$emit(‘自定义事件名称’)来触发
- 监听自定义事件：通过v-on的形式来监听自定义事件
4.3.2 自定义事件传参
说明：如果想要让自定义的事件可以访问到组件的数据，可以在自定义事件从参数列表第二位开始传入参数（第一位是自定义事件名称）。
<template>
<div>
<p>Count的值是：{{count}}</p>
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
name:'MyCount',
emits:['countChange'],
data(){
return {
count:0,
}
},
methods:{
add(){
this.count++;
// 2 触发自定义事件
this.$emit('countChange',this.count)
}
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
<template>
<div>
<h1>App根组件</h1>
<hr>
<MyCounter @countChange="getCount"></MyCounter>
</div>
</template>
<script>
import MyCounter from './Counter.vue';
export default {
name:'MyApp',
methods:{
getCount(val){
alert('触发了'+val+'次事件');
}
},
components:{
MyCounter,
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
4.4 组件上的双向绑定
4.4.1 为什么需要在组件上使用v-model
说明：当我们需要维护组件内外数据的同步时，可以在组件上使用v-model指令。
4.4.2 实现组件间的双向绑定
父向子同步：父组件通过v-bind将数据通过props传入子组件
子向父同步：在v-bind指令之前添加v-model指令，并且在子组件中声明emits自定义事件，当触发$emit事件时，更新父组件的数据。
文章来源: blog.csdn.net，作者：ArimaMisaki，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/chengyuhaomei520/article/details/126567810
- 点赞
- 收藏
- 关注作者
评论（0）