Vue.js组件传值 - 父子组件通信详解 - 常规

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>Vue.js组件传值 - 父子组件通信详解</title>
		<script src='js/vue.js'></script>
	</head>
	<body>
		<div id='app'>
			<hellobox :msg='msg' :age='age' :hobby='hobby'></hellobox>
<pre><code>	&lt;/div&gt;
	&lt;script&gt;
		var obj1={
			'template':`
			&lt;div&gt;
				&lt;h1&gt;接收父组件传过来的消息是{{msg}}&lt;/h1&gt;
				&lt;h2&gt;{{age}}...{{hobby}}&lt;/h2&gt;
			&lt;/div&gt;
			`,
			// props:['msg','age','hobby']
			props:{
				msg:String,
				age:Number,
				hobby:String
			}
		}
		var app =new Vue({
			el:'#app',
			data:{
				msg:'my life',
				age:10,
				hobby:'gg'
			},
			components:{
				'hellobox':obj1
			}
		})
	&lt;/script&gt;
&lt;/body&gt;
</code></pre>
</html>