vue的匿名插槽

最新推荐文章于 2024-08-26 03:28:51 发布

liu1992452008

最新推荐文章于 2024-08-26 03:28:51 发布

阅读量370

点赞数

分类专栏： vuejs

本文链接：https://blog.csdn.net/liu1992452008/article/details/78605703

版权

vuejs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

Slet插槽--实现内容的分发

vv不过

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<script type="text/javascript" src="vue1.0.25.js" ></script>
	</head>
	<body>
		
	
		<div id="app">
			<my-slot>
				<img src="04表单提交/img/btns.png" alt="" />
				<p>这是一个花姑娘</p>
				<input type="date" />
			</my-slot>
		</div>
		<template id="my_slot">
			<div id="panel">
				<h2 class="panel-header">插槽的头部</h2>
				<!--//预留一个插槽-->
				<slot>可以替换任何一个标签</slot>
				<footer>插槽的尾部</footer>
			</div>
		</template>
	<script type="text/javascript">

          Vue.component(
          	'my-slot',{
          		template:'#my_slot'
          		
          		
          		}
          
          )

			new Vue({
				el:'#app',
				data:{
					totalcount:0
				},
          			methods:{
          				allcounter(){
          					this.totalcount+=1
          				}
				
				}
    	
			})
			
		</script>
	</body>
</html>