<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>prop</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<blog-post title="hello!" :likes='5' isPublished="true" commentIds="[1,2,3]" author="{name:'jim',age:25}"></blog-post>
</div>
<script>
Vue.component("blog-post",{
props:{
title:String,
likes:Number,
isPublished:Boolean,
commentIds:Array,
author:Object
},
template:'<h3>{{title}} {{likes}}</h3>'
})
var app = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
需要注意的几点：
1、HTML特性不区分大小写。当使用非字符串模板时，props的名字形式会从camelCase转为kebab-case（短横线隔开）
例如:
props:["myMessage"]
<child my-message="hello!"></child>/
2、props验证失败后，控制台会报错
3、传入数字只能通过v-bind进行绑定
4、将父组件的数据传入到子组件中，子组件中进行渲染
单向数据流：
<div id='app'>
<blog-post :initial-counter="5"></blog-post>
</div>
<script>
Vue.component("blog-post",{
props:{
initialCounter:Number
},
data:function () {
return{
counter:this.initialCounter
}
},
template:'<h3>{{counter}}</h3>'
})
var app = new Vue({
el:"#app",
data:{
}
})
</script>
1、子组件将值进行保存后（作为一个本地的props数据）在自己组件上进行渲染
注意：如果 :initial-counter=" ABC "是在字符串等加冒号，意味着是在data里面找寻数据进行替换
<div id='app'>
<blog-post size=" ABC "></blog-post>
</div>
<script>
Vue.component("blog-post",{
props:['size'],
computed:{
normallizedSize:function(){
return this.size.trim().toLowerCase()
}
},
template:'<h3>{{normallizedSize}}</h3>'
})
var app = new Vue({
el:"#app",
data:{
}
})
</script>
2、 原始数据进行转换传入
props验证：
<div id='app'>
<blog-post size=" ABC "></blog-post>
</div>
<script>
Vue.component("blog-post",{
props:{
'size':Boolean
},
computed:{
normallizedSize:function(){
return this.size.trim().toLowerCase()
}
},
template:'<h3>{{normallizedSize}}</h3>'
})
var app = new Vue({
el:"#app",
data:{
}
})
</script>
传入的不是自己的指定类型会报错：
props:{
'size':{
type:[String,Number],
required:true
}
},
字段类型，是否为必须要传的类型
<div id='app'>
<blog-post></blog-post>
</div>
<script>
Vue.component("blog-post",{
props:{
'size':{
type:[String,Number],
default:'20'
}
},
default:function () {
return '20'
}
默认值20
注意：default不能使用computed、data等里面的数据，以为这些是在他渲染后才会有的数据
type类型：String,Number,Boolean,Array,Object,Date,Function,Symbol
除此之外，type还支持自定义的构造函数进行校验
禁用特性继承：
<div id='app'>
<base-input class='h1' label='hello' value='jim' placeholder="填写用户名称"></base-input>
</div>
<script>
Vue.component('base-input',{
inheritAttrs:false,
props:['label','value'],
template:`
<label>
{{label}}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input',$event.target.value)"
>
</label>
`
})
var app = new Vue({
el:"#app",
data:{
}
})
</script>
inheriAttrs：false和$attrs，可以手动决定这些特性会被赋予哪个元素
并且这个模式允许在使用基础组件的同时使用HTML的元素，而不会担心哪个是真正的元素（父组件会传递给子组件）
扫一扫
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
