<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="box">
<parent></parent>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
},
components: {
'parent': {
template: '<div><h1>parent</h1><child :message="msg" :message2="msg2"></child></div>',
data: function () {
// body...
return {
msg: '烟锁池塘柳',
msg2: '桃燃锦江堤',
}
},
components: {
'child': {
template: '<span>{{ message }},{{ message2 }}!</span>',
props: ['message','message2']
}
}
}
}
});
</script>