vue卡槽

最新推荐文章于 2024-07-22 10:50:59 发布

liquor.(讽刺)

最新推荐文章于 2024-07-22 10:50:59 发布

阅读量215

点赞数

文章标签： vue.js html webview

本文链接：https://blog.csdn.net/weixin_52568086/article/details/125187891

版权

本文详细介绍了Vue.js中组件的卡槽(Slot)用法，包括默认卡槽、具名卡槽和作用域卡槽。默认卡槽用于插入组件内部的HTML结构，具名卡槽允许指定不同名称的卡槽插入多层结构，而作用域卡槽则用于传递数据，实现类似prop的功能，允许父组件向子组件传递动态内容。

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

默认卡槽

什么是卡槽：在组件标签里边添加html结构

如： ==父组件中==

<category> 

 <ul>我是卡槽</ul> 

</category>

==子组件中==

相对应的html结构，组件<category/>中的ul标签会自动插入到<slot></slot>

<div class="category">

 <slot>我是卡槽</slot>

</div>

<!--插入后的演变的html结构-->

<div class="category">

   <ul>我是卡槽</ul> 

</div>

<category/>组件没有写html结构，<slot></slot>标签会按照正常标签显示文字类容

##具名卡槽

什么是具名卡槽——带有名称的卡槽称具名卡槽

作用：一个组件标要写多层html结构

==父组件中==

<category> 

<img

       slot="center" <!--卡槽名称 一定要写-->

      src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"

      alt=""

    />

 <a slot="footer" href="http//www.atguigu.com">更多美食</a>

</category>

相对应的html结构

==子组件中==

<div class="category">

   <slot name="center">哈哈哈哈哈哈哈哈哈</slot>

   <slot name="footer">哈哈哈哈哈哈哈哈哈</slot>

</div>



<!--插入后的演变的html结构-->

<div class="category">

 <img slot="center"  src="" alt="" /> <!--卡槽名称 一定要写-->

 <a slot="footer" href="http//www.atguigu.com">更多美食</a>

</div>

作用域卡槽

作用域卡槽的特点：用于传送数据，类似于 prop属性传递数据。常用于不能移动的数据

==子组件中==

<template>

 <div class="categoryList">

   <h3>{{ title }}分类</h3>

   <slot :games="games"></slot>

   <!--放卡槽的使用组件传送数据-->

 </div>

</template>



<script>

export default {

 name: "CATEGORY",

 props: ["title"],

 data() {

   return {

     games: ["交媾", "火锅", "辣椒", "奶酪"],

  };

},

};

</script>

数据传递给组件标签：

==父组件中==

 <category title="love">

     <template scope="{games}">

       <!--一定要在组件标签里边写template,结构赋值ES语法-->  

       <h4 v-for="(g, index) in games" :key="index">{{ g }}</h4>

     </template>

   </category>



<!--插入后的演变的html结构-->

<div class="category">

  <h4>交媾</h4>

  <h4>火锅</h4>

  <h4>辣椒</h4>

  <h4>奶酪</h4>

</div>