vuedemo-279-3
/
插槽.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<hobby>
				<div>rap</div>
				<div ref="lanqiu">篮球</div>
				<button @click="showmsg">展示信息</button>
			</hobby>

		</div>

		<script src="js/vue.js" type="text/javascript"></script>
		<script>
			var hobby = {
				template:`
					<div  >
						唱,跳
						<slot></slot>

					</div>
				`
			}

			new Vue({
				el:'#app',
				components:{
					'hobby' : hobby
				},
				methods:{
					showmsg(){
						//获取子级节点信息
						console.log(this.$refs.lanqiu);	//document.getElementBy...
						//获取父级节点
						console.log(this.$parent)
					}
				}
			})

		</script>

	</body>
</html>