(精华2020年5月6日更新) vue教程篇 slot插槽（内容分发）的使用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>slot内容分发</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri...

2b勿扰

14849人浏览 · 2020-05-06 23:51:42

2b勿扰 · 2020-05-06 23:51:42 发布

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>slot内容分发</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<my-hello>
            <ul slot="s2">
                <li>aa</li>
                <li>bb</li>
                <li>cc</li>
            </ul>
            我是需要额外显示的组件的内容
            <ul slot="s1">
                <li>1222</li>
                <li>1222</li>
                <li>1222</li>
            </ul>
        </my-hello>
	
	</div>

	<template id="hello">
		<div>
            <slot name='s1'>如果没有内容，就显示</slot>		
            <h3>welcome to itapp</h3>
            <slot>如果没有内容，就显示</slot>	
            
            <slot name='s2'>如果没有内容，就显示</slot>		
		</div>
	</template>

	<script>

		var vm=new Vue({
			el:'#app',
			components:{
				'my-hello':{
					template:'#hello'
				}
			}
		});	
	</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^