首页 > 其他分享 >vue2和vue3中插槽写法区别

vue2和vue3中插槽写法区别

时间:2023-08-14 11:13:39浏览次数:44  
标签:slot 作用域 插槽 默认 vue2 vue3 组件 属性

一、slot是什么

  • 在HTML中 slot 元素 ,作为 Web Components 技术套件的一部分,是Web组件内的一个占位符。
  • 该占位符可以在后期使用自己的标记语言填充。
    (我们可以理解为solt在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中slot位置),作为承载分发内容的出口)

二、使用场景

通过插槽可以拓展组件,去更好地复用组件和对其做定制化处理。
例:父组件使用到一个复用组件,但是该组件在不同的地方有少量的区别,若单独为了这不同的地方重写一个组件显然在成本方面是有浪费的,此时我们就可以使用插槽的方式进行设计。
比如布局组件、表格列、下拉选、弹框显示内容等...

三、slot的分类

  • 默认插槽
  • 具名插槽
  • 作用域插槽

四、slot的使用方式

1. vue2.0的使用方式
子组件中定义时:
  • 插槽用<slot>标签来确定渲染的位置,里面放如果父组件没传内容时的后备内容;

  • 具名插槽name属性来表示插槽的名字,不传为默认插槽;

  • 作用域插槽在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件slot-scope接受的对象上。

    <!-- Child.vue -->
    <template>
      <div>
        <!-- 默认插槽 -->
        <main>
            <slot>
                <h3>没传内容</h3>
            </slot>
        </main>
    
        <!-- 具名插槽 -->
        <header>
            <slot name="header">
                <h3>没传header插槽</h3>
            </slot>
        </header>
    
        <!-- 作用域插槽 -->
        <footer>
            <slot name="footer" testProps="子组件的值">
                <h3>没传footer插槽</h3>
            </slot>
        <footer>
      </div>
    </template>
    
    <style scoped>
    div {
        border: 1px solid #000;  
    }
    </style>
    
父组件中在使用时:
  • 默认插槽的话直接在子组件的标签内写入内容即可;

  • 具名插槽是在默认插槽的基础上加上slot属性,值为子组件插槽name属性值;

  • 作用域插槽则是通过slot-scope获取子组件的信息,在内容中使用。且这里可以用解构语法去直接获取想要的属性。

    <!-- Parent.vue -->
    <child>
      <!-- 默认插槽 -->
      <div>默认插槽</div>  
      <!-- 具名插槽 -->
      <div slot="header">具名插槽header</div>
      <!-- 作用域插槽 -->
      <div slot="footer" slot-scope="slotProps">
        {{slotProps.testProps}}
      </div>
    </child>
    
渲染结果

2. vue3.0的使用方式

在vue2.6中,上述的API被软废弃(3.0正式废弃),取而代之的是内置指令v-slot,可以缩写为【#】

子组件用法保持不变,父组件中
  • slot属性弃用。具名插槽通过指令参数v-slot:插槽名 的形式传入,可以简化为 #插槽名默认插槽名为defaul,可以省略default直接写v-slot,缩写为#时不能不写参数,简写成#default
  • 多个插槽混用时,v-slot不能省略default
  • v-slot属性只能在<template>上使用,但在【只有默认插槽时】可以在组件标签上使用;
  • slot-scope属性弃用,作用域插槽通过v-slot:插槽名="slotProps"的slotProps来获取子组件传出的属性;
  • 可以通过解构获取v-slot={user},还可以重命名v-slot="{user: newName}"和定义默认值v-slot="{user = '默认值'}"
<!-- Parent.vue -->
<template >
    <child>
        <!--默认插槽-->
        <template v-slot>
            <div>默认插槽</div>
        </template>

        <!--具名插槽-->
        <template #header>
            <div>具名插槽</div>
        </template>

        <!--作用域插槽-->
        <template #footer="slotProps">
            <div>
                {{slotProps.testProps}}
            </div>
        </template>
    <child>
</template>

标签:slot,作用域,插槽,默认,vue2,vue3,组件,属性
From: https://www.cnblogs.com/sakura-hfhj/p/17628072.html

相关文章

  • Spring Boot + Vue3前后端分离实战wiki知识库系统<十二>--用户管理&单点登录开发一
    目标:在上一次https://www.cnblogs.com/webor2006/p/17533745.html我们已经完成了文档管理的功能模块开发,接下来则开启新模块的学习---用户登录,这块还是有不少知识点值得学习的,先来看一下整体的效果,关于效果官网有一个体验地址:wiki.courseimooc.com,如下:其效果也是人人熟知的,下面......
  • VUE3_API 风格
    选项式API(OptionsAPI)使用选项式API,我们可以用包含多个选项的对象来描述组件的逻辑,例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上,它会指向当前的组件实例<script>exportdefault{//data()返回的属性将会成为响应式的状态/......
  • 使用create-vue创建vue3项目
    create-vue是vue3新的脚手架搭建项目工具,底层构建工具使用vite,而不是vue-cli的webpack。但不是说你不能用以前的vuecreate命令来创建vue3项目,你完全可以用vue-cli来创建。vite:https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project使用create-vue创建项目使用cr......
  • vue3组合式api生命周期
    生命周期钩子函数Vue3:https://cn.vuejs.org/api/composition-api-lifecycle.htmlVue2:https://v2.cn.vuejs.org/v2/api/#选项-生命周期钩子Vue2(选项式)Vue3(选项式)Vue3(组合式Api)beforeCreate()beforeCreate()created()created()setup()beforeMount()bef......
  • vue3在父子组件使用v-model双向绑定
    父组件:<scriptsetup>importInputBoxfrom"@/compon/InputBox.vue";import{ref}from"vue";constcount=ref(100)</script><template><div>我是父组件,{{count}}<InputBoxv-model="count"&......
  • vue3.3实验性新特性defineModel
    子父之间使用v-model双向绑定数据,子组件每次都要写emit和props觉得麻烦?vue3.3新的实验性特性defineModel可以完全不写emit和props。由于是实验性特性,所以需要配置之后才能使用。修改vite.config.js:exportdefaultdefineConfig({plugins:[vue(**{script:{......
  • Vue全家桶系~2.Vue3开篇(过渡)
    Vue全家桶先贴一下Vue3的官方文档:https://cn.vuejs.org/guide/introduction.html官方API文档:https://cn.vuejs.org/api/1.前言:新旧时代交替1.1.开发变化1.网络模型的变化:以前网页大多是b/s,服务端代码混合在页面里;现在是c/s,前后端分离,通过jsapi(类似ajax的方式)获取j......
  • 插件系列 vue2安装tailwindcss
    官方网址:https://www.tailwindcss.cn/docs/installation安装步骤:直接安装创建文件tailwindcss.cssmain.js全局引入文件tailwindcss.css在项目更目录下执行初始化配置文件指令第一步:直接安装npminstall-Dtailwindcss@npm:@tailwindcss/postcss7-compatpostcs......
  • vue2使用table进行单元格合并,后面列合并需根据前某列条件合并
    示例:<tableclass="table_style"><thead><tr><td>姓名</td><td>年龄</td><td>车辆</td>&......
  • 模拟Vue2的v-model
    模拟Vue2的v-model<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><div><!--<buttonid="myBtn">改变user......