slot插槽和ref、$parent

最新推荐文章于 2023-07-23 21:30:47 发布

Mr.ZKH

最新推荐文章于 2023-07-23 21:30:47 发布

阅读量410

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuejs

本文链接：https://blog.youkuaiyun.com/weixin_44415461/article/details/97941991

Vuejs 专栏收录该内容

41 篇文章

订阅专栏

本文详细解析了Vue框架中slot插槽的概念及其动态DOM特性，同时介绍了如何利用ref属性在父组件中获取子组件实例，包括具体代码示例及运行效果展示。

slot插槽
- slot就是子组件里给DOM留下的坑位
- <子组件>DOM</子组件>
- slot是动态的DOM
ref获取子组件实例
- 识别：在子组件或元素上使用属性ref=“xxxx”
- 获取：this.$refs.xxxx 获取元素
- $el 是拿其DOM
$p a r e n t 获取父组件实例（可在子组件直接使用 t h i s .$ parent即可）

slot插槽：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>slot及ref</title>
	<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script type="text/javascript">
	//声明局部组件
	var Parent = {
		template:
		`<div>
		我是父级组件
		<slot name="hello"></slot>
		<slot name="world"></slot>
		</div>`
	}
	new Vue({
		el:'#app',
		//注册
		components:{
			Parent
		},
		//使用
		template:
		`<div>
			<parent>
			    <div slot="hello">我是插槽内容1</div>
			    <div slot="world">我是插槽内容2</div>
			</parent>
		</div>`,
		data(){
			return {

			}
		}

	})
</script>
</html>

运行效果图:
在这里插入图片描述
ref、$parent

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>slot及ref</title>
	<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
	<div id="app"></div>
</body>
<script type="text/javascript">
	//声明局部组件
	var Child = {
		template:
		`<div>
			这是子组件
		</div>
		`,
		data(){
			return {
				msg:'hello'
			}
		},
		created(){
			console.log(this.$parent)
		}
	}
	var Parent = {
		template:
		`<div>
		我是父级组件
		<slot name="hello"></slot>
		<slot name="world"></slot>
		<child ref="childs"></child>
		</div>`,
		//注册子组件
		components:{
			Child,
		},
		data(){
			return {
				parents:'父组件'
			}
		},
		//挂载完成
		mounted(){
			//console.log(this.$refs.childs);
		}
	}
	new Vue({
		el:'#app',
		//注册
		components:{
			Parent
		},
		//使用
		template:
		`<div>
			<parent>
			    <div slot="hello">我是插槽内容1</div>
			    <div slot="world">我是插槽内容2</div>
			</parent>
		</div>`,
		data(){
			return {

			}
		}

	})
</script>
</html>