Vue-cli 插槽

最新推荐文章于 2023-05-26 21:27:18 发布

蛮鱼

最新推荐文章于 2023-05-26 21:27:18 发布

阅读量326

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44825701/article/details/111683431

版权

简介：在使用组件过程中，有细小的区别可使用插槽。

默认插槽

组件

<template>
    <div>
        <div>插槽基本用法</div>
        
        <!--在组件中给插槽占位 <slot> -->
        
        <slot></slot>
        
        <div>上上上</div>
    </div>
</template>

插槽使用

<template>
  <div>
    <socket>
      <div class="slo">默认插槽</div>
    </socket>
  </div>
</template>

具名插槽

简介：具名插槽就是个每一个插槽取一个名字使一个组件使用多个插槽。

子组件

<template>
    <div>
    <!--在组件中给插槽取一个名字 name=“bb” -->
    	<slot  name="bb"></slot>
        <div>插槽基本用法</div>
       
        <slot  name="aa"></slot>
    </div>
</template>

父组件

<template>
  <div>
    <div>
    <!--在父组件中使用对应的名字显示具体的插槽 v-slot：aa -->
      <socket v-slot:aa>
        <div class="slo">具名插槽1</div>
      </socket>
      <div>---------------</div>
      <socket v-slot:bb>
        <div class="slo">具名插槽2</div>
      </socket>
    </socket>
  </div>
</template>

在官网中：在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

作用域插槽

简介：作用域插槽就是在插槽中使用子组件的数据

子组件

<template>
    <div> 
        <slot>{{oym}}</slot>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                oym:"数据显示1111111",
                
            }
        },
    }
</script>

父组件

<template>
  <div>
	 <!--在父组件中使用slot-scope进行接收数据 
	 这里的数据只可以在插槽中使用 -->
    <socket slot-scope="aaa">
        <div>{{aaa}}</div>
      <div class="slo">插槽</div>
    </socket>
  </div>
</template>