props特性 & 组件参数检验
一、props特性
- props中定义的数据跟data中数据一样,会直接添加在组件实例化对象上,并设置了特性,所以可以直接this.content进行访问,可直接在插值语法{{}}中使用,可进行简单逻辑处理,但是不能在methods中直接对值进行更改;
- 通过属性传值,并在props中定义的该属性不会在标签中显示;非props的属性会在标签中显示
<div id="app">
<count :content="1" counter="hello"></count>
</div>
Vue.component("count", {
props: ["content"],
......
下面是一个关于单向数据流的小例子:
<div id="app">
<count :content="1"></count>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
//注册count组件
Vue.component("count", {
props: ["content"],
template: "<div @click='addNum'>{{content}}--{{content+1}}</div>",
data() {
return {
}
},
methods: {
addNum: function() {
this.content++;
}
}
})
var app = new Vue({
el: "#app"
})
代码描述:父组件向子组件count传递content属性,子组件用props接收,可以直接在子组件模板插值语法{{}}进行使用,可以插值中进行简单js逻辑运算,但是不能在事件中对content进行修改,会报错。
原因:单向数据流
解决:将props里面的content转化为子组件实例里面data的数据,再进行操作
Vue.component("count", {
props: ["content"],
template: "<div @click='addNum'>{{content}}--{{content+1}}--{{numValue}}</div>",
data() {
return {
numValue: this.content
}
},
methods: {
addNum: function() {
this.numValue++;//可对自身实例的data值进行操作,不能反过来修改父组件传递的数值
}
}
})
二、组件参数校验
<div id="app">
<count :content="1"></count>
</div>
//注册count组件
Vue.component("count", {
// props: ["content"], 对传入的属性进行定义
//通过传入的对象,可以对参数进行校验
props: {
content: String //Number 校验content传进来的数据必须为String,不然会报错
// content: [String, Number] 可以为数字,也可以为字符串
}
template: "<div></div>",
还可以进行更加严格的校验
Vue.component("count", {
// props: ["content"], 对传入的属性进行定义
//通过传入的对象,可以对参数进行校验
props: {
content: {
type: String,
required: true,//必须添加该属性(可选)
default: "default value",//如果该属性值不存在时,默认为该字符串
//校验器:该字符串长度必须大于5
validator: function(value) {
return (value.length > 5)
}
}
},