Logstash mysql makefile pointers pagination rxjs jvm gtk vue router java并发编程视频 it教学视频 jquery选择器找子元素 python面向对象 python模块下载 java连数据库 java文件删除 java比较字符串 java读取文本 java系统学习 linuxsleep linux系统安装步骤 linux系统命令大全 海鸥浏览器 网络克隆 蓝牙测试软件 gg修改器下载 win10环境变量 华为ff ps从入门到精通 php取整 wegame更新失败 头条视频解析 截取字符串 jquery手册 微信问卷调查怎么做 js字符串转数字 lol游戏环境异常 手机上怎么剪辑音乐 小米自动开关机 dll注入器
当前位置: 首页 > 学习教程  > 编程语言

Vue slot插槽使用

2020/7/24 10:27:51 文章标签:

为保持组件化开发能满足一个组件布局的多种类展示,使用slot插槽即可解决。方法如下:

<!-- 
	需求:
	组件标题都是案例一,后面跟的标签需要不同。
	第一个是按钮
	第二是个h标签
	第三个是p标签
	基本使用
 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<cpn></cpn>
		<!-- 基本使用 -->
		<!-- <cpn>
			<button >返回按钮</button>
		</cpn>
		<cpn>
			<h1>我是H1标签</h1>
		</cpn>
		<cpn>
			<p>我是P标签</p>
		</cpn> -->
		<!-- 对应使用 -->
		<cpn>
			<button slot="left">返回按钮</button>
		</cpn>
		<cpn>
			<button slot="left">返回按钮</button>
			<span slot="center">标题</span>
		</cpn>
		<cpn>
			<button slot="left">返回按钮</button>
			<span slot="center">标题</span>
			<button slot="right">更多</button>
		</cpn>
	</div>
	<!-- 基本使用 -->
	<!-- <template id="cpn">
		<div>
			<h1>案例1</h1>
			<slot>我是slot的默认值</slot>
			<p>------------------</p>
		</div>
	</template> -->

	<!-- 具名使用(一一对应) -->
	<template id="cpn">
		<div>
			<slot name="left">默认:left</slot>
			<slot name="center">默认:center</slot>
			<slot name="right">默认:right</slot>
			<p>------------------</p>
		</div>
	</template>
</body>
<script>
	var app = new Vue({
		el:'#app',
		components:{
			cpn:{
				template:"#cpn",
			}
			
		}
	})	
</script>
</html>

本文链接: http://www.dtmao.cc/news_show_50280.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?