Vue组件--单个插槽

最新推荐文章于 2023-12-21 15:23:52 发布

AsaZyf

最新推荐文章于 2023-12-21 15:23:52 发布

阅读量192

点赞数

分类专栏： Vue Vue组件文章标签： Vue Vue组件 Vue插槽 Vue单个插槽

本文链接：https://blog.csdn.net/AsaZyf/article/details/83650299

版权

Vue 同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

Vue组件

11 篇文章 0 订阅

订阅专栏

code：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	    <script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<soual>
			<!--不在子组件加插槽，这里显示不了-->
				<h3>测试</h3>
			</soual>
		</div>
		<script>
			Vue.component("soual",{
				data(){
					return{
						
					}
				},
				template:`
				    <div>
				        <button>按钮</button>
//				        插槽
				        <slot>
				        
				        </slot>
				    </div>
				`
			})
			
			new Vue({
				el:"#app",
				data:{
					
				}
			})
		</script>
	</body>
</html>