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>

  

上一篇:Android拍照调用系统相册仿微信封装总结,治疗各种崩溃,图片横竖问题压缩等问题。


下一篇:Vuejs学习笔记(二)-1.组件的基本使用-全局组件