Vue 插槽

最新推荐文章于 2024-08-12 16:58:47 发布

小白-先森

最新推荐文章于 2024-08-12 16:58:47 发布

阅读量810

点赞数

分类专栏： Vue技巧笔记文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Allurewuhui/article/details/121168974

版权

Vue插槽提供了一种父组件向子组件插入HTML结构的方法，实现组件间的通信。内容包括：1. 默认插槽的使用，将HTML标签放入组件内部，并在子组件模板相应位置用<slot></slot>插入；2. 具名插槽，通过name属性指定插入位置；3. 作用域插槽，子组件传递数据，而结构由父组件决定，父组件通过scope属性访问并渲染数据。

摘要由CSDN通过智能技术生成

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。

默认插槽的使用：

（1）组件标签必须是左右闭合的，把想要放入插槽的HTML标签写入组件标签之中，需要数据的地方可以直接从data中获取使用

（2）在对应组件的模板中想要插入html标签的位置使用<slot></slot>标签即可

父组件中：
<Category title="游戏" >
	<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
	<ul>
		<li v-for="(g,index) in games" :key="index">{
  {g}}</li>
	</ul>
</Category>

子组件中：
<template>
	<div>
		<h3>{
  {title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

具名插槽的使用：

可以实现根据位置需要向指定位置插入插槽

（1）在子组件设置slot标签时给其添加一个name属性

（2）在组件标签内部书写HT