prop：
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<style>
div {
font-size: 14px;
font-weight: normal;
color: grey;
}
.title {
font-size: 22px;
font-weight: bolder;
color: skyblue;
}
.common {
margin-top: 20px;
margin-bottom: 20px;
border-top: 2px dashed gainsboro;
}
.parting-line {
background: peachpuff;
margin: 20px;
}
</style>
</head>
<body>
<div id="app1">
<div class="common">
<div class="title">(1) app1-传递静态prop</div>
<blog-post post-title="m kkdsd"></blog-post>
<div class="title">(2) app1-动态赋予一个变量的值</div>
<blog-post v-bind:post-title="post.title"></blog-post>
<div class="title">(3) app1-动态赋予一个复杂表达式的值</div>
<blog-post v-bind:post-title="post.title + ' by ' + post.author.name"></blog-post>
</div>
</div>
</body>
<script>
// prop验证
Vue.component('my-component', {
props: {
// 基础类型检查
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
Vue.component('blog-post', {
props:['postTitle'],
template:`<h3>{{postTitle}}</h3>`
})
var app1 = new Vue({
el:'#app1',
data:{
post:{
title:'kkk',
author:{
name:'888'
}
}
}
})
</script>
</html>
参考 & 感谢：vue官网 & 各路大神