正文
vue2.0 静态prop和动态prop
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
动态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>
