var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}
var parentNode = {
 template: `
 <div class="parent">
 <child message="aaa"></child>
 <child message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

var parentNode = {
 template: `
 <div class="parent">
 <child my-message="aaa"></child>
 <child my-message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['my-message']
}

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var parentNode = {
 template: `
 <div class="parent">
 <child :my-message="data1"></child>
 <child :my-message="data2"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return {
 'data1':'aaa',
 'data2':'bbb'
 }
 }
};

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
<div id="example">
 <my-parent></my-parent>
</div>
<script>
var childNode = {
 template: '<div>{{myMessage}}的类型是{{type}}</div>',
 props:['myMessage'],
 computed:{
 type(){
 return typeof this.myMessage
 }
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <my-child my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'MyParent': parentNode
 }
})
</script>

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>
var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};

var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="data"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 },
 data(){
 return {
 'data': 1
 }
 }
};

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
 }
 }
 }
})

String
Number
Boolean
Function
Object
Array
Symbol

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':Number
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg: '123'
 }
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':{
 validator: function (value) {
 return value > 10
 }
 }
 }
}

var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg:1
 }
 }
};

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: `
 <div class="child">
 <div>
 <span>子组件数据</span>
 <input v-model="childMsg">
 </div>
 <p>{{childMsg}}</p>
 </div>
 `,
 props:['childMsg']
}
var parentNode = {
 template: `
 <div class="parent">
 <div>
 <span>父组件数据</span>
 <input v-model="msg">
 </div>
 <p>{{msg}}</p>
 <child :child-msg="msg"></child>
 </div>
 `,
 components: {
 'child': childNode
 },
 data(){
 return {
 'msg':'match'
 }
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}