首页 > 其他分享 >vue(13)在模板中使用slot插槽排序

vue(13)在模板中使用slot插槽排序

时间:2022-12-06 16:33:51浏览次数:37  
标签:slot 13 vue 作用域 插槽 Vue 标签 组件

Slot插槽
插槽就是父组件往子组件中插入一些内容。
有三种方式,默认插槽,具名插槽,作用域插槽
默认插槽就是把父组件中的数据,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据
具名插槽是在父组件中通过slot属性,给插槽命名,在子组件中通过slot标签,根据定义好的名字填充到对应的位置。
作用域插槽是带数据的插槽,子组件提供给父组件的参数,父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。

实例代码

点击查看
            <!DOCTYPE html>
            <html>
            	<head>
            		<meta charset="utf-8">
            		<title></title>
            		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
            	</head>
            	<body>
            		<div id="app">
            			<Kissor>
            				<h3 slot="footer">这是页尾</h3>
            				<p>我爱学习</p>
            				<p>学习爱我</p>
            				<h1 slot="header">这是首页</h1>
            			</Kissor>
            		</div>
            		
            	</body>
            	<script>
            	    var am = Vue.extend({
            	    		template: `
            		<div>
            			<header>
            				<slot name="header"></slot>
            			</header>
            			<main>
            				<slot></slot>
            			</main>
            			<footer>
            				<slot name="footer"></slot>
            			</footer>
            		</div>`
            	    
            	    	})
            	    	Vue.component("Kissor", am)
            	
            		var vm = new Vue({
            			el:"#app",
            			data:{
            				
            			},
            			methods:{
            				
            			}
            		})
            	</script>
            </html>

标签:slot,13,vue,作用域,插槽,Vue,标签,组件
From: https://www.cnblogs.com/wengming/p/16955711.html

相关文章