Vue组件 props
Posted niusan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件 props相关的知识，希望对你有一定的参考价值。
组件是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;
}
}
},
以上是关于Vue组件 props的主要内容，如果未能解决你的问题，请参考以下文章