版权声明:报名咨询QQ:3246333637,本文为 张晨光老师 创作,未经博主允许不得转载 https://blog.csdn.net/zhangchen124/article/details/86589005
组件可以为 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>