vue3之slots和attrs函数使用(setup函数的使用)

slots就是拿到插槽的数据(但是这个用法我不是特别清楚)(直接把插槽放在组件标签里面,一般插槽是放在组件声明的时候的,不清楚作用,等待解决)attrs:就可以拿到这个组件传进来的属性的数据<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></

默默努力的小老弟

4148人浏览 · 2021-12-02 17:52:20

默默努力的小老弟 · 2021-12-02 17:52:20 发布

slots就是拿到插槽的数据(但是这个用法我不是特别清楚)(直接把插槽放在组件标签里面,一般插槽是放在组件声明的时候的,不清楚作用,等待解决)
attrs:就可以拿到这个组件传进来的属性的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<lk-box style="width: 200px; height: 200px;
			 background-color: red;"
			 >
			 <slot>xxxx</slot>
			 
			 </lk-box>
			
			
			
			
		</div>
	</body>
	<script src="js/vue3.js"></script>
	<script>
		const app=Vue.createApp({
			
			
		});
		app.component('lk-box',{
			setup(props,context){
				const {attrs,slots,emit}=context;
				//拿到样式属性
				console.log(attrs.style);
				//拿到插槽里面的html代码数据(以数组的形式出现)
				console.log(slots.default()[0].props);
				
				
			},
			template:
			//父组件给子组件传递数据 no-props
			  '<div :style="$attrs.style">我是子组件</div>' 
			
		});
	   app.mount("#app");
	
	</script>
</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}$/, //不连续的两位字母// /^