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

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>xxxxslot>
			 
			 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
			  '
我是子组件
'
}); app.mount("#app");
script> html>

你可能感兴趣的:(前端,vue.js,html5)