Prop 验证
【摘要】
组件可以为 props 指定验证要求。
prop 是一个对象而不是字符串数组时，它包含验证要求：
Vue.component('example', { props: { // 基础类型检测 （`null` 意思是任何类型都可以） propA: Number, // 多种类型 propB: [String, ...
组件可以为 props 指定验证要求。
prop 是一个对象而不是字符串数组时，它包含验证要求：
-
Vue.component('example', {
-
props: {
-
// 基础类型检测 （`null` 意思是任何类型都可以）
-
propA: Number,
-
// 多种类型
-
propB: [String, Number],
-
// 必传且是字符串
-
propC: {
-
type: String,
-
required: true
-
},
-
// 数字，有默认值
-
propD: {
-
type: Number,
-
default: 100
-
},
-
// 数组／对象的默认值应当由一个工厂函数返回
-
propE: {
-
type: Object,
-
default: function () {
-
return { message: 'hello' }
-
}
-
},
-
// 自定义验证函数
-
propF: {
-
validator: function (value) {
-
return value > 10
-
}
-
}
-
}
-
})
type 可以是下面原生构造器：
- String
- Number
- Boolean
- Function
- Object
- Array
type 也可以是一个自定义构造器，使用 instanceof 检测。
自定义事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName)触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>自定义事件</title>
-
<script src="js/vue.js"></script>
-
</head>
-
<body>
-
<div id="app">
-
<div id="counter-event-example">
-
<p>{{total}}</p>
-
<button-counter v-on:click.native="incrementTotal"></button-counter>
-
<button-counter v-on:increment="incrementTotal"></button-counter>
-
</div>
-
</div>
-
<script>
-
Vue.component('button-counter',{
-
template:'<button v-on:click="incrementHandler">{{counter}}</button>',
-
data:function(){
-
return{counter:0}
-
}
-
,
-
methods:{
-
incrementHandler:function(){
-
this.counter+=1
-
this.$emit('increment')
-
}
-
}
-
})
-
new Vue({
-
el:'#counter-event-example',
-
data:{total:0},
-
methods:{
-
incrementTotal:function(){
-
this.total+=1
-
}
-
}
-
})
-
</script>
-
</body>
-
</html>
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/86589005
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）