vue3中插槽slot的使用

谁借莪１个温暖的怀抱￠ 2023-01-17 09:26 15阅读 0赞

在子组件中写插槽标签slot给slot添加name属性。

子组件中的代码：

<template>
      <div class="navBox">
      	
        <div class="menus"> </div>
        
        
        <slot name="headerBox"></slot>
        
        
        <div class="user"></div>
      </div>
    <style> .navBox{ display:flex } </style>
    <template>

vue3 中插槽的使用，需要用template包裹插槽里的内容，\#+ 插槽定义时的name的值。  
写法

<template #headerBox></template>

插槽中可以填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的slot标签。  
这里是用的引入的topSearchBox组件。在插槽里的组件渲染出来是headerBox的一个子元素和menu user是同一层级。

在父组件中的代码

<template>
      <div class="home">
      
      <div class="headerBox">
      
        <indexHeader>
         
           <template #headerBox>
             <topSearchBox></topSearchBox>
           </template>
         </indexHeader>
      </div>
      
      
      <div class="body"> </div>
      
      
      <div class="footer"> </div>
    </div>
    <template> 
    <script> import { defineComponent, defineAsyncComponent, reactive, onMounted, toRefs } from 'vue' const indexHeader = defineAsyncComponent(() => import('./components/navBar.vue')) const topSearchBox = defineAsyncComponent(() => import('./components/topSearchBox.vue')) export default defineComponent({ components: { indexHeader, topSearchBox }, setup () { } }) </script>

发表评论取消回复

表情：

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

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

相关阅读

相关 vue中的插槽————slot

转载链接：[https://www.cnblogs.com/loveyt/p/9946450.html][https_www.cnblogs.com_loveyt_p_9946

阳光穿透心脏的1/2处/ 2023年02月15日 13:59/ 0 赞/ 2 阅读

相关 vue3中插槽slot的使用

在子组件中写插槽标签slot给slot添加name属性。子组件中的代码： <template> <div class="navBox">

谁借莪１个温暖的怀抱￠/ 2023年01月17日 09:26/ 0 赞/ 16 阅读

相关 vue slot插槽

一、介绍：slot可以理解为占位符，在子组件中给父组件站位。二、举例说明： 1、没有插槽：（1）父组件： <template> <div>

墨蓝/ 2022年12月27日 01:30/ 0 赞/ 268 阅读

相关 Vue插槽slot的使用

vue官方文档中关于slot插槽的说明很简短，语言又写的很凝练,这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于

浅浅的花香味﹌/ 2022年10月10日 04:41/ 0 赞/ 204 阅读

相关 Vue_使用插槽（slot）

当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（DOM）的数据，那么如何传值呢？如果我们像正常父向子传值那样操作。 <sl

╰半夏微凉°/ 2022年05月22日 13:42/ 0 赞/ 362 阅读

相关 Vue slot插槽

我们对于slot这个概念或许不是很清楚，但是我们在实际的使用中可能已经遇到很多次了。比如我们在使用ivew组件库的时候，就会经常遇到slot这个单词。而实际上，slot的使用更

一时失言乱红尘/ 2022年05月12日 12:38/ 0 赞/ 291 阅读

相关 Vue-slot插槽

1、插槽内容 ![20190125111259437.png][] <script src="https://cdn.jsdelivr.net/npm/vue

忘是亡心i/ 2022年04月23日 07:56/ 0 赞/ 342 阅读

相关 vue slot 插槽的使用

父组件 <template> <div> <h3>这里是父组件</h3> <ceshitab :li

喜欢ヅ旅行/ 2022年03月20日 11:26/ 0 赞/ 276 阅读

相关 Vue中的slot插槽

前言：之前学VUE对插槽只有一个模糊的存值概念，最近在封装自定义组件时，再次学习一下。通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参，简化了进行自

怼烎@/ 2022年02月27日 03:28/ 0 赞/ 310 阅读

相关 vue 插槽 slot

\[vue\] 插槽 slot  <div data-note-content="" class="show-conte

小咪咪/ 2022年01月20日 05:34/ 0 赞/ 368 阅读