slot

01 插槽的基本使用

<body>
		<!-- 组件的插槽是为了封装的组件更加具有扩展性 -->
		<!-- 
			1.插槽的基本使用 组件中声明<slot></slot>
			2.插槽的默认值 组件中使用 <slot><button>案例</button></slot>
			3.如果有多个值,同时放入到组件进行替换时,一起作为替换元素
		 -->
		<div id="app01">
			<cpn></cpn>
			<cpn><a href="www.baidu.com">我可以替换组件中的默认插槽</a></cpn>
			<cpn>
				<h3>多个值替换,同时放入到组件中替换插槽</h3>
				<h4>多个值替换,同时放入到组件中替换插槽</h4>
				<h5>多个值替换,同时放入到组件中替换插槽</h5>
			</cpn>
		</div>
		<template id="cpn">
			<div>
				<h3>我是组件</h3>
				<p>哈哈哈</p>
				<slot><button>我是默认按钮</button></slot>
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:"#app01",
				data:{
					message:‘hello world‘
				},
				components:{
					cpn:{
						template:"#cpn"
					}
				}
			})
		</script>

  

02 具名插槽

<body>
		<div id="app01">
			<cpn><span slot="right">标题</span></cpn>
			<cpn><button slot="middle">按钮</button></cpn>
		</div>
		<template id="cpn">
			<div>
				<slot name="left"><span>左边</span></slot>
				<slot name="middle"><span>中间</span></slot>
				<slot name="right"><span>右边</span></slot>
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:"#app01",
				data:{
					message:‘hello world‘
				},
				components:{
					cpn:{
						template:"#cpn"
					}
				}
			})
		</script>

  

03 编译作用域概念

  解释:此处div id="app01" 模块中使用了组件cpn,可以当做基本的div来看待,使用的isShow会从Vue实例中取值

       组件div中button中使用的isShow取自身组件中的isShow的值

<body>
		<div id="app01">
			<cpn v-show="isShow"></cpn>
		</div>
		<template id="cpn">
			<div>
				<h3>我是组件</h3>
				<p>哈哈哈哈</p>
				<button type="button" v-show="isShow">按钮</button>
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:"#app01",
				data:{
					message:‘hello world‘,
					isShow:true
				},
				components:{
					cpn:{
						template:"#cpn",
						data(){
							return {
								isShow:false
							}
						}
					}
				}
			})
		</script>

  

slot

上一篇:[HTML/CSS]div显示在object、embed之上~


下一篇:jQuery实现瀑布流的简单方法