动态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>