動態prop：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
</head>
<body>
<div id="app">
<div>
<input v-model='parentMsg' />
<br />
<child v-bind:my-Message="parentMsg"></child>
<!--可以理解成var mymesage = parentMsg;-->
</div>
</div>
<template id="simpleDemo">
<div> {{myMessage}} </div>
</template>
<script>
/*props可以是數組或者是對象,用於接收父組件的數據. props 對象允許配置高級選項,HTML特性不區分大小寫,名字形式為駝峰式的prop作為特性時,我們 需要轉為 a-b (短橫線隔開)*/
var vm = new Vue({ el: "#app", data: { parentMsg: "hello Prop" }, components: { 'child': { template: "#simpleDemo", props: ["myMessage"], //自定義名字
/*props:{ type:String, required:true }, props:{ type:Number， default：100 }*/ } } }) </script>
</body>
</html>
靜態prop：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue2.2.js"></script>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<div id="app">
<my-component :my-name="name" :my-age="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="2">子組件</th>
</tr>
<tr>
<td>名字</td>
<td>年齡</td>
</tr>
<tr>
<td>{{myName}}</td>
<td>{{myAge}}</td>
</tr>
</table>
</template>
<script>
var vm = new Vue({ el: "#app", data: { name: "小明", age: 24 }, components: { 'my-component': { template: "#myComponent", props: ["myName", "myAge"] } } }) </script>
</body>
</html>