Vue组件 props

て烟熏妆下的殇ゞ 提交于 2020-12-17 15:37:49

组件是Vue最强大的功能之一;组件化编程,允许我们使用小型,独立,通用的可复用型组件构建大型应用;任何页面都可以抽象为组件树;

<!--
组件需要注册后才能使用。
注册有全局注册和局部注册两种方式
全局注册:
全局:
局部注册:
局部: 注册后的组件只是在该作用域下有效

父组件正向的向子组件传递数据和参数 用 props
props的值 可以是两种
1,字符串数组 props:['message']
2,对象 props: {}
props中的数据来自父元素。data中的数据来自组件自己的数据。
两种数据都可以在computed,methods,template中使用

 

单项数据流
父组件将改变后的数据传递给子组件,反过来是不行的。

业务中需要改变props的情况
1,父组件传递初始值进来,子组件将他作为初始值保存起来,
在自己的作用域下面随意修改和使用。
props:['msg'],
data() {
return {
message: this.msg;
}
}
2,props作为需要被改变的原始值传入可以使用计算属性
props:['msg'],
computed: {
message() {
return this.msg;
}
}


由于HTML 不区分大小写,当使用DOM模板时候。骆峰命名的props的名称
转为短横线分隔符
showText ==> show-text

 

 

当DOM作为模板时会受到HTML的一些限制,
因为Vue浏览器解析和标准化HTML后才能获取模板内容
以下来源不会受限制:
1,<script type="text/x-template">
2, JS 内联模板字符串
3, .vue组件

如果限制了:方案使用is
<table>
<my-component></my-component>
</table>

<table>
<tr is="myComponent"></tr>
</table>
-->

 props数据验证 

//
/**
* 数据验证的type类型可以是
* String,
* Number,
* Boolean,
* Object,
* Array,
* Function
* type也可以是一个自定义的构造器,使用instanceof 检测
*
* 当prop验证失败的时候,在开发版本下会在控制台抛出一条警告
*
*/
props: {
//数据验证
name: String, //字符串类型
age: [ String, Number], // 必须是字符串或者数组类型
propB: {
// 布尔值 如果没定义,默认是true
type: Boolean,
default: true
},
propC: {
//数组而且是必传
type: Number,
required: true
},
propD: {
//如果是数组或者对象,默认值必须是一个函数来返回
type: Array,
default : function() {
return [];
}
},
propF: {
// 自定义一个验证函数
validator : function( value) {
return value > 10;
}
}
},

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!