Vue使用Props实现组件数据交互的示例代码
作者：初叙
在Vue中,组件的props属性用于定义组件可以接收的外部数据,这些数据来自父组件并传递给子组件,本文给大家介绍了Vue使用Props实现组件数据交互,文中有详细的代码示例供大家参考,需要的朋友可以参考下
props可以是一个数组或对象，用于指定子组件接受的属性名称。通过在父组件中使用子组件时，通过属性的方式将数据传递给子组件，属性名即为在子组件中声明的props的属性名称。子组件可以在其模板中通过props属性访问父组件传递的数据。props的作用是向子组件传递数据，允许传递任意数量的prop和任意类型的prop。在Vue 3和TypeScript中，深入了解组件的Props是非常重要的，因为可以在组件的选项中使用props属性来定义Props的类型和验证规则。
使用如下：
1、在使用子组件的父组件传递数据
<RefreshBtn @onFreshEvent="getData" :newsRefresh="newsRefresh"/>
2、子组件数据应用，使用props确定接收数据的类型和默认值，在props中还可以进行数据校验。
<template>
<button @click="refreshHandle">刷新</button>
<p>父页面数据：{{newsRefresh}}</p>
</template>
<script>
export default {
name: "RefreshBtn",
props: {
newsRefresh: {
type: String,
default: ""
}
},
data() {
return {
target: 1
}
},
methods: {
refreshHandle() {
this.$emit("onFreshEvent",this.target);
this.target += 1;
}
}
}
</script>props完整的校验写法：
props: {
校验的属性名: {
type: 类型, // Number String Boolean ...
required: true, // 是否必填
default: 默认值, // 默认值
validator (value) {
// 自定义校验逻辑
return 是否通过校验
}
}
},<script>
export default {
// 完整写法（类型、默认值、非空、自定义校验）
props: {
w: {
type: Number,
//required: true,
default: 0,
validator(val) {
// console.log(val)
if (val >= 100 || val <= 0) {
console.error('传入的范围必须是0-100之间')
return false
} else {
return true
}
},
},
},
}
</script>到此这篇关于Vue使用Props实现组件数据交互的示例代码的文章就介绍到这了,更多相关Vue Props数据交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！