美文网首页
Vue2和3中的插槽区别及其简单案例

Vue2和3中的插槽区别及其简单案例

作者: 天渺工作室 | 来源:发表于2024-04-04 00:26 被阅读0次

vue中的插槽是什么,官方解释是:

Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口......

vue2插槽vue3插槽基本概念是一致的,也是匿名插槽、具名插槽、作用域插槽三种,只是基础语法有一些区别。

下面让我们温习一下插槽的常用基础知识点。

匿名插槽

Vue2案例:

<!-- 子组件 child-component -->  
<template>  
  <div>  
    <slot></slot>  
  </div>  
</template>  

<!-- 父组件使用匿名插槽组件 child-component -->  
<template>  
  <child-component>  
    <p>这是默认插槽的内容哈哈哈</p>  
  </child-component>  
</template>

Vue3案例:

<!-- 子组件child-component -->  
<template>  
  <div>  
    <slot></slot>  
  </div>  
</template>  
  
<!-- 父组件使用插槽组件 child-component -->  
<template>  
  <child-component>  
    <template v-slot>  
      <p>这是默认插槽的内容hello world</p>  
    </template>  
  </child-component>  
</template>

具名插槽

Vue2案例:

<!-- 子插槽组件child-component -->  
<template>  
  <div>  
    <slot name="header"></slot>  
    <slot name="content"></slot>  
    <slot name="footer"></slot>  
  </div>  
</template>

<!-- 父组件使用插槽组件child-component -->  
<template>  
  <child-component>  
    <template slot="header">  
      <h1>这是header部分</h1>  
    </template>  
    <template slot="content">  
      <p>这是content</p>  
    </template>  
    <template slot="footer">  
      <p>这是footer</p>  
    </template>  
  </child-component>  
</template>

Vue3案例:

<!-- 子插槽组件child-component -->  
<template>  
  <div>  
    <slot name="header"></slot>  
    <slot name="content"></slot>  
  </div>  
</template>  

<!-- 父组件使用插槽组件 -->  
<template>  
  <child-component>  
    <template v-slot:header>  
      <h1>这是header</h1>  
    </template>  
    <template v-slot:content>  
      <p>这是content</p>  
    </template>  
  </child-component>  
</template>

作用域插槽

作用域插槽日常可能使用的很少,但是某些场景用起来还是很方便的。可以简单的理解为 作用域插槽允许父组件访问子组件内部的数据,并基于这些数据渲染内容。

Vue2案例:

<!-- 子组件child-component返回给父级组件user数据 -->  
<template>  
  <div>  
    <slot :user="user"></slot>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      user: { name: '张三000' }  
    }  
  }  
}  
</script>  
  
<!-- 父组件使用child-component ,并获取到子组件返回的 user数据-->  
<template>  
  <child-component>  
    <template slot-scope="scope">  
      <p>用户名:{{ scope.user.name }}</p>   <!--张三000-->
    </template>  
  </child-component>  
</template>

Vue3案例:

子插槽组件:

<template>  
    <slot :user="user"></slot>   
</template>  
<script setup>
import { reactive } from "vue";

const user = reactive({
    name: '张三',  
    age: 30  
});
</script>

父组件使用子插槽组件:

<template>  
  <div>  
    <child-component>  
        <template v-slot:default="{ user: { name, age } }">
            <p>姓名: {{ name }}</p>  
            <p>年龄: {{ age }}</p>  
        </template>  
    </child-component>  
  </div>  
</template>  
<script setup>
import ChildComponent from './ChildComponent.vue'; 
<script>

相关文章

  • (十八)补充-Vue3中插槽的使用

    本章我们将了解到的是vue3中常用插槽的使用; vue3中的插槽是在用的时候和vue2的区别略有不同,常见插槽使用...

  • 插槽的使用

    1. 插槽和组件的区别 插槽和组件的用法基本相同,主要的区别是父组件可以在插槽中自定义子组件的DOM 2.基本使用...

  • 18、Vue3 作用域插槽

    作用域插槽:让插槽内容能够访问子组件中,vue2中作用域插槽使用slot-scope,vue3中使用v-slot ...

  • vue3和vue2的区别及vue3核心语法

    一、 vue3和vue2的区别 api的区别vue2: vue3 vue3底层用的typescript语言编写,v...

  • vue2(webpack)调用amap高德地图及其UI组件

    vue2(webpack)调用amap高德地图及其UI组件和标记物# 今天一个app项目中要使用vue2加入高德地...

  • vue-slot

    从官网上我们可以获知,Vue中的slot主要分为:单个插槽、具名插槽和作用域插槽三种。而其使用也较为简单,比如我们...

  • vue2.6.0版本插槽的使用

    插槽slot简单的理解就是一段html代码模板,只是需要的在一个特定的情况下使用。插槽分为普通插槽,具名插槽,作用...

  • Vue 插槽

    1.插槽的简单使用 在组件中声明一个插槽 使用组件时 可以替换插槽 如果不替换插槽就使用默认值 2.具名...

  • Vue3中用自定义指令拦截点击事件,点击事件添加权限

    案例使用Vue3举例,如在Vue2中使用思路是一致的,语法稍有区别。 问题 某些应用场景会给点击事件添加权限,不存...

  • vue3静态标记

    vue2与vue3都有静态标记区别在于vue2只能标记全量的静态比如 {{name}} 在vue2中 只要有某一...

网友评论

      本文标题:Vue2和3中的插槽区别及其简单案例

      本文链接:https://www.haomeiwen.com/subject/luhntjtx.html