vue的几种插槽及具体用法

偏执的太偏执、 2023-07-03 07:21 57阅读 0赞

##### 插槽 #####

*  基本用法：组件son里所有的slot都会被替换

<div>
    	<slot></slot>
    </div>
    
    <son>
    	替换slot
    </son>

*  具名插槽（通过slot的name属性）

<div>
    	<slot name = "one"></slot>
    	<slot name = "two"></slot>
    	<slot name = "three"></slot>
    </div>
    
    <son>
    	<template v-slot:one>替换name为one的slot</template>
    	<template v-slot:two>替换name为two的slot</template>
    	<template v-slot:three>替换name为three的slot</template>
    </son>

*  默认插槽（匹配上没有名字的slot）

<div>
    	<slot name = "one"></slot>
    	<slot></slot>
    	<slot name = "three"></slot>
    </div>
    
    <son>
    	<template v-slot:one></template>
    	<template></template>  //会匹配上没有名字的slot
    	<template v-slot:three></template>
    </son>

*  作用域插槽（在组件内部通过slot关键字将数据源交到外部的插槽中）

<div>
    	<slot :abc="msg"></slot>
    </div>
    
    <son>
    	<template v-slot="obj">
    		{
       {obj}}   
    	</template>
    </son>

##### 欢迎大家批评指正 #####

发表评论取消回复

表情：

评论列表（有 0 条评论，57人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 插槽 (Slots) 源码解析与用法

Vue 插槽 (Slots) 源码解析与用法；插槽；slot

╰半夏微凉°/ 2024年04月20日 12:07/ 0 赞/ 145 阅读

相关 Vue插槽---默认插槽、具名插槽、作用域插槽

目录总结 1.默认插槽 2.具名插槽 3.作用域插槽一、不使用插槽的效果 App.vue Category.vue 二、默认插槽 App.vue

浅浅的花香味﹌/ 2024年04月06日 10:08/ 0 赞/ 196 阅读

相关 Vue-几种插槽(slot)的使用

插槽(slot) 插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式一共有三种分类：默认插槽、具名插槽、作用域插

悠悠/ 2023年10月12日 19:37/ 0 赞/ 120 阅读

相关 vue的几种插槽及具体用法

插槽基本用法：组件son里所有的slot都会被替换  <div> <slot></slot> </div>

偏执的太偏执、/ 2023年07月03日 07:21/ 0 赞/ 58 阅读

相关 vue插槽slot的默认插槽、具名插槽与作用域插槽的用法

一、vue的插槽slot 在`vue`的开发当中，我们可能也经常会使用插槽`slot`，父组件给子组件传递`DOM`元素。插槽的实质，实际上是对于子组件的扩展，通过`slot

╰+哭是因爲堅強的太久メ/ 2023年06月25日 07:44/ 0 赞/ 57 阅读

相关 vue 插槽有名插槽

<body> <div id="app"> <base-layout> <p slot='header'>标题信息</p

红太狼/ 2023年01月08日 04:23/ 0 赞/ 338 阅读

相关 vue filter的几种用法

1、自定义的过滤器，当然这包括注册在全局和注册在实例化的内部（1）注册在全局的fliter (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放

忘是亡心i/ 2022年05月23日 06:25/ 0 赞/ 352 阅读

相关 vue.js插槽Slot的用法与具名插槽、作用域插槽的使用

1、基本用法插槽指允许将自定义的组件像普通标签一样插入内容 import Vue from 'vue' // 定义组件componentOne

Myth丶恋晨/ 2022年05月14日 11:58/ 0 赞/ 430 阅读

相关 Vue插槽

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

旧城等待，/ 2021年08月19日 11:57/ 0 赞/ 551 阅读

相关 Vue过滤器的几种用法

Vue过滤器的几种用法本文主要介绍Vue项目中filter的几种用法。一. 单独在组件或者是页面中使用单独在页面或者是组件中使用vue filter比较

川长思鸟来/ 2021年07月27日 02:28/ 0 赞/ 511 阅读