<my-label labelName="用户名"></my-label>
这条数据my-login父级发给子级
这条数据my-label子级接受到了props:['labelName']，这子级就接收到了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="container">
<my-login></my-login>
</div>
<script>
Vue.component('my-label',{
// 这条数据my-label子级接收到了
props:['labelName'],
// 这条数据放进标签里了
template:'<label>{{labelName}}</label>'
})
Vue.component('my-input',{
props:['tips'],
template:'<input type="text" :placeholder="tips"/>'
})
Vue.component('my-button',{
props:['btnName'],
template:'<button>{{btnName}}</button>'
})
Vue.component('my-login',{
template:`
<form>
<my-label labelName="用户名"></my-label>
<my-input tips="请输入用户名"></my-input>
<br/>
<my-label labelName="密码"></my-label>
<my-input tips="请输入密码"></my-input>
<br/>
<my-button btnName="登录"></my-button>
<my-button btnName="注册"></my-button>
</form>
`
})
new Vue({
el: '#container',
data: {
msg: 'Hello Vue'
}
})
</script>
</body>
</html>
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
