Advertisement

vue3知识点4slot插槽/具名插槽代码

阅读量:

前言:以下为slot插槽的示例代码。
关于更全面的解析,建议前往vue3组件详解链接查阅相关目录中的slot插槽内容。

复制代码
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>slot插槽</title>
    		<script src="js/vue.global.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<div>我是头部</div>
    			<!-- 子组件1:演示插槽 -->
    			<tempbtn>
    				<h3>我是父组件中原有的布局。</h3>
    			</tempbtn>
    			
    			<!-- 子组件1:演示具名插槽 -->
    			<temp2btn>
    				<!-- 如果父组件遗留了两个部分在子组件2里,就要用到具名插槽了。 -->
    				<template v-slot:header1>
    					<h3 >我是父组件的布局1</h3>
    				</template>
    				<template v-slot:header2>

全部评论 (0)

还没有任何评论哟~