首页 > 其他分享 >props自定义属性

props自定义属性

时间:2023-06-02 09:33:16浏览次数:46  
标签:自定义 init props 组件 默认值 属性

props

含义

props是组件的自定义属性,在封装通用组件的时候,合理的使用props可以极大地提高组件的复用性。

注意:全局组件在main.js里注册;使用者中标签直接调用(注意v-bind);组件里注意props的只读性。

method单行代码简写

仅单行能这么写

<template>
<div>
 <button @click="add">+1</button>
</div>
</template>
<script>
 methods: {
   add() {
     this.count += 1
  }
}
</script>
<template>
<div>
<button @click="count += 1">+1</button>
</div>
</template>
<script>
</script>

语法

props属性的形式

1.数组

数组形式:使用数组形式定义 props 时,每个元素表示一个属性名。这种方式适合于简单的属性定义,不需要指定额外的校验或配置。

props: ['prop1', 'prop2', 'prop3']

2.对象

对象形式:使用对象形式定义 props 时,每个键值对表示一个属性的配置,其中键是属性名,值是配置对象。这种方式适合于复杂的属性定义,可以提供更多的配置选项,如类型、默认值、校验函数等。

props: {
 prop1: {
   type: String,
   required: true
},
 prop2: {
   type: Number,
   default: 0
},
 prop3: {
   type: Array,
   default: () => []
}
}

props只读性

读:可渲染;写:可修改。

注意:props 是只读的,不要直接修改 props 的值,否则终端会报错!比如<button @click="init += 1">+1</button>, 欲修改props的值,可以吧props的值转存到data中,因为data的数据都是可读可写的。

default默认值

在声明自定义属性时,可以通过default来定义属性的默认值,默认值可以是确保即使没有传递属性值,组件也能正常工作的一切值。

init相关在init属性内设置。

type值类型

在声明自定义属性时,可以通过type来定义属性的值类型。

如果输的不对会报错。

required必填项校验

required: true

意味着在使用该组件时,必须传入这该组件props属性所有属性的值,否则会在控制台输出警告信息。

注意:必填项只校验有没有传递属性, 和默认值无关。

 

代码示例

<script>
 export default {
   // props 是"自定义属性",允许使用者通过自定义属性,为当前组件指定初始值
   // 自定义属性的名字,是封装者自定义的(只要名称合法即可),这里的是init,在使用者组件中。
   // props 中的数据,可以直接在模板结构中被使用
   // 注意:props 是只读的,不要直接修改 props 的值,否则终端会报错!比如<button @click="init += 1">+1</button>
   // props: ['init'],
   props: {
     // 自定义属性A : { /* 配置选项 */ },
     // 自定义属性B : { /* 配置选项 */ },
     // 自定义属性C : { /* 配置选项 */ },
     init: {//init相关在init属性内设置
       // 如果外界使用 Count 组件的时候,没有传递 init 属性,则默认值生效
       default: 0,
       // init 的值类型必须是 Number 数字
       type: Number,
       // 必填项校验
       required: true
    }
  },
   data() {
     return {
       // 把 props 中的 init 值,转存到 count 上
       count: this.init
    }
  },
   methods: {
     show() {
       console.log(this)
    }
  }
}
</script>
<template>
<div>
//这个是使用者
//init='9'这里的是字符串
//使用v-bind里面写的是js表达式,js里直接写9是number
//如果是字符串累加就成了91111111,而非9+1+1+1
 <MyCount :init="9"></MyCount>
 </div>
</template>
 

标签:自定义,init,props,组件,默认值,属性
From: https://www.cnblogs.com/yxxcl51/p/17450890.html

相关文章

  • 实现表格中各单元格字段都支持自定义点灯的思路
    1.数据库,增加一个点灯信息字段:内容为json字符串存储,key即为每个列的字段名,内容就为点灯颜色。eg:lightInfo:{"name":"red","id":"blue"}2.前台用lightInfo[该列对应的具体的字段名]动态获取对应字段的点灯信息。3.前台点灯的编辑方式,可以采用vxetable右键menuConfig或是......
  • mysql functions ,LAST_INSERT_ID() 或 自定义主键
    http://dev.mysql.com/doc/refman/5.6/en/information-functions.html LAST_INSERT_ID() 这个值如果各个table都有一个自增的id,那么各个table用各自的LAST_INSERT_ID()  自定义:#固定前缀(2位)+时间戳(13位)+随机数(7位)SELECTCONCAT('AB',#......
  • 成品直播源码推荐,Android 自定义颜色样式
    成品直播源码推荐,Android自定义颜色样式<?xmlversion="1.0"encoding="utf-8"?><resources>  <colorname="colorPrimary">#7bb736</color>  <colorname="colorPrimaryDark">#16c24b</color>  <c......
  • java -jar XXX.jar 没有主清单属性以及找不到或无法加载主类的问题
    <skip>true</skip>一定要去掉每个插件都有一个< skip ></skip>属性,maven在调用插件的时候判断这个属性的值是否是true,是true的话就跳过。<plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</ar......
  • android ImageView 设定宽度铺满,高度自定义
    问题:imageView宽度铺满,高度自定义,会出现上下留白的现象(一般比例的还好)解决:<xxx.xxx.xxx.xxx.FullWidthImageViewandroid:id="@+id/iv_image_corp"android:layout_width="match_parent"android:layout_height="wrap_content"......
  • 规则引擎的低代码日记——自定义函数编程操作(类excel函数)
    它是技术源码可开放的JAVA规则引擎,采用springcloud+VUE的技术架构进行构建,其中对数据的灵活加工处理采用的是函数式编程的思路(类excel函数配置),是其亮点功能。它允许开发人员定义和管理应用程序的规则,并在应用程序中执行这些规则。在规则引擎中,从数据加工成变量并使用函数式编程......
  • 如何绑定Property以实现控件属性同步
    如何绑定Property以实现控件属性同步控件的属性往往是各种Property,比如StringProperty,IntegerProperty。它们有着特殊的性质:可以在其上添加一个监听函数,在属性发生变化时自动调用可以绑定另一个Property,从而同步变更效果展示示例代码importjavafx.application.A......
  • jmeter 自定义函数和Sampler(采集器)
    第一个插件自定义函数(Function)代码具体如下,生成jar放到lib\ext目录下即可。/*代码路径中,一定要放在functions目录中,否则jmeter会识别自定义函数失败*/packageinterfacePerformance.functions;importjava.util.Collection;importjava.util.LinkedList;importjav......
  • Arrays:自定义排序规则的方式二
          ......
  • Arrays类:自定义排序规则的方式一
         ......