vue的实名插槽

最新推荐文章于 2023-03-08 22:26:10 发布

liu1992452008

最新推荐文章于 2023-03-08 22:26:10 发布

阅读量292

点赞数

分类专栏： vuejs

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

版权

vuejs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!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>
				<div slot='cpu'>vvvvvvv</div>
				<img slot='gpu'  src="04表单提交/img/ad.png"/>
			</my-slot>
		</div>
		<template id="my_computer">
			<div id="main">
				<slot name='cpu'>这是插入cpu的</slot><br>
				<slot name='gpu'>这是插入gpu的</slot><br>
				<slot name='ccc'>这是插入内存条的</slot><br>
				<slot name='yyy'>这是插入硬盘的</slot><br>
				<slot name='shu'>这是插入数据线的</slot><br>
			</div>
		</template>
	<script type="text/javascript">

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

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