Vue特殊特性slot　　传送门

　　有时候我们需要在自定义组件内书写一些内容，例如：

　　　　 <com-a>

　　　　　　<h1>title</h1>

　　　　 </com-a>

　　 如果想获取上面代码片段中h1标签的内容该怎么办呢？Vue提供了一个极为方便的内置组件<slot>

　　Learn

　　　　一、使用solt分发内容

　　目录结构

　　

　　【每个demo下方都存有html源码】

一、使用solt分发内容

　　在<my-component-a>组件中添加<h1>、<ul>、<a>标签，并在<h1>标签中添加组件<slot="title">、在<ul>标签中添加组件<slot="ul">，在<a>标签中添加组件<solt="a">

    <body>

        <div id="GaryId">

            <my-component-a>

                <h1 slot="title">Gary大标题</h1>

                <ul slot="ulli">

                    <li>a</li>

                    <li>b</li>

                    <li>c</li>

                </ul>

                <a href="#" slot="a">传送门</a>

            </my-component-a>

        </div>

    </body>

　　可以直接在<template>中设计标签布局顺序

    <template id="template-a">

        <div>

            <slot name="title">数据为空</slot>

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

            <slot name="a">数据为空</slot>

            <slot name="ulli">数据为空</slot>

        </div>

    </template>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Gary</title>

    </head>

    <body>

        <div id="GaryId">

            <my-component-a>

                <h1 slot="title">Gary大标题</h1>

                <ul slot="ulli">

                    <li>a</li>

                    <li>b</li>

                    <li>c</li>

                </ul>

                <a href="#" slot="a">传送门</a>

            </my-component-a>

        </div>

    </body>

    <template id="template-a">

        <div>

            <slot name="a">数据为空</slot>

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

            <slot name="ulli">数据为空</slot>

            <slot name="title">数据为空</slot>

        </div>

    </template>

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

    <script type="text/javascript">

        let comA = {

            template :  "#template-a"

        }

        new Vue({

            data : {

            },

            components : {

                "my-component-a" : comA

            }

        }).$mount("#GaryId");

    </script>

</html>

Gary_slot.html

Vue_(组件通讯)使用solt分发内容的更多相关文章

  1. Vue_(组件通讯)单项数据流

    Vue单项数据流 传送门 单向数据流:父组件值的更新,会影响到子组件,反之则不行 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据 如果对数 ...

  2. Vue_(组件通讯)非父子关系组件通信

    Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...

  3. Vue_(组件通讯)子组件向父组件传值

    Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...

  4. Vue_(组件通讯)父组件向子组件传值

    Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...

  5. Vue_(组件通讯)父子组件简单关系

    Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...

  6. Vue_(组件通讯)动态组件结合keep-alive

    keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...

  7. Vue_(组件通讯)动态组件

    动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...

  8. Vue_(组件通讯)组件

    Vue组件 传送门 组件Component,可扩展HTML元素,封装可重用的代码.通俗的来说,组件将可重用的HTML元素封装成为标签方便复用: 组件的使用: 使用全局方法Vue.extend创建构造器 ...

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

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

随机推荐

  1. 服务端相关知识学习（六）Zookeeper client

    Zookeeper的client是通过Zookeeper类提供的.前面曾经说过,Zookeeper给使用者提供的是一个类似操作系统的文件结构,只不过这个结构是分布式的.可以理解为一个分布式的文件系统. ...

  2. JS基础_算数运算符

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 转：idea类名出现了不同的颜色

    转:https://blog.csdn.net/yf_mood/article/details/88191818 在安装了git以后发现idea类名出现了不同的颜色,如下: 它们分别表示的含义: 绿色 ...

  4. HTML的学习（注释）

    <!--charset 编码字符集--> <!--UTF-8 万国码 gb2312 中国标准第2312条 中文,韩文....大部分的亚裔语言(繁体字不支持) GBK 在上面的基础之上 ...

  5. Html-自适应

    自适应 使网页能适应不同终端设备的技术.原理是通过检测视口分辨率来判断是什么终端的,PC,手机还是平板. 做自适应的网页时,需要在代码中加入“祖传代码”,即通用代码. 这是在头部head引入的: &l ...

  6. Idea格式化快捷键无效，没反应

    Idea格式化快捷键无效,没反应 1,关闭网易云音乐快捷键 2,修改搜狗输入法快捷键 目前本人只遇到过这两种

  7. 第四篇.python的基础

    目录 第四篇.python基础01 1. 变量 2. 常量 3. python变量内存管理 4. 变量的三个特征 5. 花式赋值 6. 注释 7. 数据类型基础 8. 数字类型 9. 字符串类型 10 ...

  8. 04.ZabbixWEB网站监控

    1.Web场景监测概述 1.Web网站中什么是动态网站,什么是静态网站 静态网站:纯静态网站就是服务器的源代码和客户端的源代码一致. 动态网站:比如: <?php phpinfo()?> ...

  9. ScrollView 滚动视图

    ScrollView 种类: 1.HorizontalScrollView:水平滚动视图 2.ScrollView:垂直滚动视图(常用类) public class MainActivity exte ...

  10. 【vue lazyload】插件的使用步骤

    VUE图片懒加载-vue lazyload插件的简单使用