vue2.0 静态prop和动态prop
2024-08-30 14:12:06
动态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>
最新文章
- 使用SecureCRT连接虚拟机（ubuntu）配置记录
- Freemarker与Springmvc
- GZFramwork数据库层《前言》DLL项目引用
- UESTC 2016 Summer Training #1 Div.2
- Reveal 破解
- 关于JLINK固件丢失或升级固件后提示Clone的解决办法
- android-exploitme（五）：不安全的数据存储
- cassandra新增、更新、删除数据。
- Servlet的生命周期？
- Python核心编程(第八章)--条件和循环
- 关于new 和delete
- Excel文件转换为html静态网页
- 【BZOJ3924】幻想乡战略游戏（动态点分治）
- Android高级控件（五）——如何打造一个企业级应用对话列表,以QQ，微信为例
- mybatis 生成 映射文件生成工具 mybatisGenerator 使用
- drupal7 hook_validate
- python并发学习总结
- linux 三大利器 grep sed awk sed
- jquery制作滚动条到一定位置触发
- 永远不要去B网（Bittrex.com）