vue学习（十四）slot学习

Myth丶恋晨 2022-04-18 00:17 299阅读 0赞

1，在自定义组件中，参入响应的标签

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;

&lt;t-body&gt;
            &lt;div slot="header"&gt;header&lt;/div&gt;
            &lt;div slot="footer"&gt;footer&lt;/div&gt;
        &lt;/t-body&gt;

&lt;t-body-a&gt;
            &lt;div slot="footer"&gt;footer&lt;/div&gt;
        &lt;/t-body-a&gt;
    &lt;/div&gt;

&lt;script&gt;

Vue.component('t-body',{
            template:'&lt;div&gt;' +
            '&lt;slot name="header"&gt;&lt;/slot&gt;' +
            '&lt;div&gt;content&lt;/div&gt;' +
            '&lt;slot name="footer"&gt;&lt;/slot&gt;' +
            '&lt;/div&gt;'
        })

Vue.component('t-body-a',{
            template:'&lt;div&gt;' +
            '&lt;slot name="header"&gt;&lt;div&gt;default header&lt;/div&gt;&lt;/slot&gt;' +
            '&lt;div&gt;content&lt;/div&gt;' +
            '&lt;slot name="footer"&gt;&lt;/slot&gt;' +
            '&lt;/div&gt;'
        })

var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue'
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

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

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

相关阅读

相关 Vue学习Ⅳ（slot与v-slot、模块化开发、导入与导出、webpack）

一、slot 组件的插槽是为了让组件更具有扩展性，也可以让使用者决定组件内部的一些内容是什么 slot的基本使用 <div class = "app">

绝地灬酷狼/ 2023年05月21日 11:51/ 0 赞/ 66 阅读

相关 Vue学习（slot、axios）-学习笔记

文章目录 Vue学习（slot、axios）-学习笔记 slot 插槽 axios 交互 Vue学习（slot、

梦里梦外;/ 2022年10月04日 14:56/ 0 赞/ 237 阅读

相关 Vue学习笔记（十三）——slot插槽（PART4）

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 本文主要介绍插槽的缩写和复用。插槽的

阳光穿透心脏的1/2处/ 2022年04月24日 12:54/ 0 赞/ 253 阅读

相关 vue学习（十四）slot学习

1，在自定义组件中，参入响应的标签 <table> <tbody> <tr> <td> <pre><code><!DOCTYPE html> &

Myth丶恋晨/ 2022年04月18日 00:17/ 0 赞/ 299 阅读

相关 Vue学习笔记4.6 插槽用法slot

依然是看注释的12345点 <!DOCTYPE html> <html> <head> <title>插槽</title> <sc

男娘i/ 2022年03月22日 13:26/ 0 赞/ 236 阅读

相关 Vue学习笔记（十）——slot插槽（PART1）

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 首先简单说明一下slot插槽的应用场景：

布满荆棘的人生/ 2022年02月23日 13:56/ 0 赞/ 316 阅读

相关 Vue学习笔记（十一）——slot插槽（PART2）

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 本文继续介绍基于参考文档对slot插槽使

深碍√TFBOYSˉ_/ 2022年02月18日 18:41/ 0 赞/ 300 阅读

相关 Vue学习笔记（十二）——slot插槽（PART3）

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 非组件插槽的几个注意点： 1.当有多个

客官°小女子只卖身不卖艺/ 2022年02月16日 11:45/ 0 赞/ 271 阅读

相关 vue的slot学习

最近vue2.6发布，其中更新的就有插槽slot 先来理解一下什么是插槽，看一个简单例子就能理解父组件 <div class="test">

矫情吗；*/ 2021年11月23日 03:16/ 0 赞/ 322 阅读

相关学习下vue的slot插槽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

缺乏、安全感/ 2021年09月19日 08:12/ 0 赞/ 328 阅读