Vue使用Props实现组件数据交互的示例代码

上官敬

props可以是一个数组或对象，用于指定子组件接受的属性名称。通过在父组件中使用子组件时，通过属性的方式将数据传递给子组件，属性名即为在子组件中声明的props的属性名称。子组件可以在其模板中通过props属性访问父组件传递的数据。props的作用是向子组件传递数据，允许传递任意数量的prop和任意类型的prop。在Vue 3和TypeScript中，深入了解组件的Props是非常重要的，因为可以在组件的选项中使用props属性来定义Props的类型和验证规则。
使用如下：
1、在使用子组件的父组件传递数据

1. <RefreshBtn @onFreshEvent="getData" :newsRefresh="newsRefresh"/>

复制代码

2、子组件数据应用，使用props确定接收数据的类型和默认值，在props中还可以进行数据校验。

1. <template>
   
2.     <button @click="refreshHandle">刷新</button>
   
3.     <p>父页面数据：{{newsRefresh}}</p>
   
4. </template>
   
5. 
   
6. <script>
   
7. export default {
   
8.     name: "RefreshBtn",
   
9.     props: {
   
10.         newsRefresh: {
    
11.             type: String,
    
12.             default: ""
    
13.         }
    
14.     },
    
15.     data() {
    
16.         return {
    
17.             target: 1
    
18.         }
    
19.     },
    
20.     methods: {
    
21.         refreshHandle() {
    
22.             this.$emit("onFreshEvent",this.target);
    
23.             this.target += 1;
    
24.         }
    
25.     }
    
26. }
    
27. </script>

复制代码

props完整的校验写法：

1. props: {
   
2.   校验的属性名: {
   
3.     type: 类型,  // Number String Boolean ...
   
4.     required: true, // 是否必填
   
5.     default: 默认值, // 默认值
   
6.     validator (value) {
   
7.       // 自定义校验逻辑
   
8.       return 是否通过校验
   
9.     }
   
10.   }
    
11. },

复制代码

1. <script>
   
2. export default {
   
3.   // 完整写法（类型、默认值、非空、自定义校验）
   
4.   props: {
   
5.     w: {
   
6.       type: Number,
   
7.       //required: true,
   
8.       default: 0,
   
9.       validator(val) {
   
10.         // console.log(val)
    
11.         if (val >= 100 || val <= 0) {
    
12.           console.error('传入的范围必须是0-100之间')
    
13.           return false
    
14.         } else {
    
15.           return true
    
16.         }
    
17.       },
    
18.     },
    
19.   },
    
20. }
    
21. </script>

复制代码

到此这篇关于Vue使用Props实现组件数据交互的示例代码的文章就介绍到这了,更多相关Vue Props数据交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/323514e6b.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！