slot详细介绍网址：https://cn.vuejs.org/v2/api/#slot

有时候我们需要在自定义组件内书写一些内容，例如： <com-a> <h1>title</h1> </com-a> 如果想获取上面代码片段中h1标签的内容该怎么办呢？

Vue提供了一个极为方便的内置组件<slot>；

初始界面：

初始demo：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title> 使用slot分发内容</title>

    </head>

    <body>

        <div>

            <my-component-a></my-component-a>

        </div>

    </body>

    <template id="template-a">

        <div>

            <h1>my-component-a</h1>

            <hr />

        </div>

    </template>

    <script type="text/javascript" src="../js/vue.js" ></script>

    <script>

        let comA = {

            template :  "#template-a"

        }

        new Vue({

            data:{

            },

            components : {

                "my-component-a" : comA

            }

        }).$mount('div');

    </script>

</html>

slot放在那里，获取到的内容就放在那里：

可以根据其name属性进行排其位置：

定义属性name的demo

<div>

            <my-component-a>

                <h1 slot='title'>大标题</h1>

                <ol slot='olli'>

                    <li>a</li>

                    <li>b</li>

                    <li>c</li>

                </ol>

                <a href="#" slot='res'>点我</a>

            </my-component-a>

        </div>

    </body>

    <template id="template-a">

        <div>

            <slot name='title'></slot>

            <h1>my-component-a</h1>

             <slot name='olli'></slot>

              <slot name='res'></slot>

            <hr />

        </div>

    </template>

使用slot分发内容总的demo：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title> 使用slot分发内容</title>

     </head>

     <body>

         <div>

             <my-component-a>

                 <h1 slot='title'>大标题</h1>

                 <ol slot='olli'>

                     <li>a</li>

                     <li>b</li>

                     <li>c</li>

                 </ol>

                 <a href="#" slot='res'>点我</a>

             </my-component-a>

         </div>

     </body>

     <template id="template-a">

         <div>

             <slot name='title'></slot>

             <h1>my-component-a</h1>

              <slot name='olli'></slot>

               <slot name='res'></slot>

             <hr />

         </div>

     </template>

     <script type="text/javascript" src="../js/vue.js" ></script>

     <script>

         let comA = {

             template :  "#template-a"

         }

         new Vue({

             data:{

             },

             components : {

                 "my-component-a" : comA

             }

         }).$mount('div');

     </script>

 </html>

使用slot分发内容总demo

Vue 组件&组件之间的通信 之 使用slot分发内容的更多相关文章

  1. vue组件详解（四）——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  2. Vue:实践学习笔记(6)——使用SLOT分发内容

    Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...

  3. Vue组件之props,$emit与$on以及slot分发

    组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式  props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...

  4. vue组件详解——使用slot分发内容

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code     一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...

  5. vue 使用Slot 分发内容 学习总结。

    https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容    官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...

  6. Vue.js-----轻量高效的MVVM框架（十一、使用slot分发内容）

    #单个slot html: <h3>#单个slot</h3> <!-- 定义child01模板 --> <template id="child01& ...

  7. vue 外卖app(3) 利用slot分发内容

    1. 增加一个HeaderTop.vue <template> <header class="header"> <slot name="le ...

  8. vue组件父子之间相互通信案例

  9. 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

随机推荐

  1. 严重: StandardWrapper.Throwable org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'goodsController' defined in file [D:\eclipse\eclipse-space\pinyougou_parent\pinyou

    由于错误太宽,没法截取完整的,所以不怎么连贯,但是不影响错误的解决. 这个错误是因为service无法自动注入.显示嵌套状态异常. 我就查看了一下我的坐标和配置文件,配置文件的路径和访问地址都是正确的 ...

  2. EF Oracle TNS 连接

    <oracle.manageddataaccess.client> <version number="*"> <settings> <se ...

  3. 微信小程序弹出操作菜单

    微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...

  4. 腾讯云“智能+互联网TechDay”：揭秘智慧出行核心技术与创新实践

    现如今,地面交通出行与大家的生活息息相关.在当前城市道路日益复杂和拥挤的情况下,如何保证交通出行的安全和便捷相信是每个人以及众多专家.科研工作者重点关注的问题. “智慧交通”系统是解决交通发展瓶颈的有 ...

  5. Python 学习笔记8 循环语句 while

    While循环是哟中利用条件语句,不断的执行某一段代码块,达到批量操作输出等一系列的操作,直到条件不满足或者被强制退出为止. 其工作流程如下: (图片来源菜鸟教程:http://www.runoob. ...

  6. Python——开发一个自动化微信投票器【附代码实例方法】

    一个研究Python实践,最近研究一个投票的东东,主要是想测试利用Python实现刷微信投票. 本文纯粹为了记录一下 webdriver直接操作页面按钮的方法: #!/usr/bin/python # ...

  7. react-router@4.0 使用和源码解析

    如果你已经是一个正在开发中的react应用,想要引入更好的管理路由功能.那么,react-router是你最好的选择~react-router版本现今已经到4.0.0了,而上一个稳定版本还是2.8.1 ...

  8. 007-chrome插件系列

    1.Axure RP Extension for Chrome 2.Charset 3.CLEAN crxMouse Gestures 4.Google 翻译 5.JSONView 6.restlet

  9. if(a)

    let a = undefined; let b = null; let c = ''; let d = ; let e = {}; let f = []; if (a) { console.log( ...

  10. Java-接口(interface)

    1.1接口的定义 java中接口是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为(功能). 接口 ...