关键词：prop
渐进式探索学习(官网的例子)
<div id="demo">
<child message="hello!"></child>
</div>
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
var vm = new Vue({
el: "#demo"
})
来个复杂点的，实现父组件向子组件传数据
Vue.component('child', {
props: ['message'],
template: `
<div>
<h3>{{title}}</h3>
<p>{{ message }}</p>
</div>
`,
data(){
return { title: '越人歌' } // 注意写成函数形式
}
})
var vm = new Vue({
el: "#demo",
data:{
poem:['山有木兮木有枝','心悦君兮君不知']
}
})
传两个数据试试
Vue.component('child', {
props: ['message','time'],
template: `
<div>
<h3>{{title}}</h3>
<p>{{ message }}</p>
<i>{{time}}</i>
</div>
`,
data(){
return { title: '越人歌' }
}
})
var vm = new Vue({
el: "#demo",
data:{
poem:['山有木兮木有枝','心悦君兮君不知'],
age:'3000年'
}
})
<div id="demo">
<child v-for= "item1 in poem":message="item1" :time="age"></child>
</div>
Prop 验证
组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。
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
}
}
}
})
这时候我们再来改写一下
Vue.component('child', {
props: {
'time': {
type: Number,
default: 1000
},
'message' :{
type: Object,
default: function () {
return { message: 'hello' }
}
}
},
template: `
<div>
<h3>{{title}}</h3>
<p>{{ message }}</p>
<i>{{time}}</i>
</div>
`,
data(){
return { title: '越人歌' }
}
})
var vm = new Vue({
el: "#demo",
data:{
poem:['山有木兮木有枝','心悦君兮君不知'],
/*age:3000*/
}
})
<div id="demo">
<child v-for= "item1 in poem":message="item1"></child>
</div>
