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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· 回顾我的软件开发经历(1)
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· .NET 9 new features-C#13新的锁类型和语义
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会