vuedemo-279-3
/
父传子.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<fathernav></fathernav>

		</div>

		<script src="js/vue.js" type="text/javascript"></script>
		<script>
			//注意点 先定义子组件 再定义父组件
			//父传子 靠属性
			var childnav = {
				template:`
					<div>
						这是子级标签 {{ call }}
					</div>
				`,
				props: [
					'call'
				]
			}

			var fathernav = {
				template:`
					<div>
						这是父级标签
						<childnav v-bind:call='fathermsg'></childnav>
					</div>
				`,
				components:{
					'childnav':childnav
				},
				data : function(){
					return {
						fathermsg : '这是父组件传给你的数据'
					}
				}
			}


			new Vue({
				el:"#app",
				components:{
					"fathernav":fathernav
				}
			})
		</script>
	</body>
</html>