<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>

</head>

<body>

  <div id="app">

    <div>

      <!-- 单slot -->

      <v-one>

        <!-- 这里的所有内容会替换掉slot -->

        <p>初始化段落一</p>

        <p>初始化段落二</p>

      </v-one>

      <!-- 渲染结果 -->

      <!-- <div>

        <h1>组件标题</h1>

        <p>初始化段落一</p>

        <p>初始化段落二</p>

        <p>组件段落内容</p>

        <p>I am one</p>

      </div> -->

      <!-- 具名slot -->

      <v-two>

        <p slot="nav">我是导航</p>

        <p slot="main">我是内容</p>

        <p slot="footer">我是底部</p>

      </v-two>

      <!-- 渲染结果 -->

      <!-- <div>

        <nav>

          <p>我是导航</p>

        </nav>

        <main>

          <p>我是内容</p>

        </main>

        <footer>

          <p>我是底部</p>

        </footer>

      </div> -->

      <!-- 作用域插槽 -->

      <v-three>

      <!-- 父组件默认无法使用子组件数据 -->

          <template scope="props">

              <p>{{props.text}}</p>

          </template>

      </v-three>

      <!-- 渲染结果 -->

      <!-- <div><p>I am three</p></div> -->

    </div>

  </div>

  <template id="one">

    <div>

      <h1>组件标题</h1>

      <slot></slot>

      <p>组件段落内容</p>

      <p>{{one}}</p>

    </div>

  </template>

  <!-- 具名slot -->

  <template id="two">

    <div>

      <nav>

        <slot name="nav"></slot>

      </nav>

      <main>

        <slot name="main"></slot>

      </main>

      <footer>

        <slot name="footer"></slot>

      </footer>

    </div>

  </template>

<!-- 作用域插槽 -->

  <template id="three">

    <div>

        <!-- 把数据传递给slot,这样父组件也可以访问three这个组件的数据 -->

      <slot :text="three"></slot>

    </div>

  </template>

  <script>

  new Vue({

    el: '#app',

    components: {

      'v-one': {

        template: '#one',

        data() {

          return {

            'one': 'I am one'

          }

        }

      },

      'v-two': {

        template: '#two',

        data() {

          return {

            'two': 'I am two'

          }

        }

      },

      'v-three': {

        template: '#three',

        data() {

          return {

            'three': 'I am three'

          }

        }

      }

    }

  });

  </script>

</body>

</html>

单个slot使用最简单，也是最常用的，当我们定义了一个子组件，父组件在使用的这个组件的时候，想在内部自定义一些初始化数据，这时候就可以用slot实现。

具名slot只是给slot加了name属性，在使用的时候可以引入多个。

作用域slot就比较强大了，我们知道子组件的数据，在父组件中是无法使用的，但是通过官方提供的扩展，可以轻松实现这一点。

渲染后效果图，可以直接复制代码自己在浏览器运行查看效果

vue slot插槽的使用方法的更多相关文章

  1. Vue slot插槽

    插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...

  2. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  3. Vue slot 插槽用法：自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  4. vue slot插槽的使用

    slot插槽的使用场景 父组件向子组件传递dom时会用到插槽   作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定   注:想要修改父组件向子 ...

  5. vue slot 插槽详解

    插槽含义:就是引入子组件后,在插入子组件元素中添加信息或者标签,使得子组件的指定位置插入信息或者标签 插槽有三种:默认插槽.具名插槽.作用域插槽,由于vue2.6.0后对插槽进行修改,但是兼容2.6. ...

  6. Vue slot插槽通俗解释

    slot内容分发是Vue的Api来源 <div id="app"> <my-list> {{msg}} </my-list> </div& ...

  7. vue slot 插槽备忘

    老是记不住插槽咋回事 记录下来备忘 父组件 <tab><template slot="boy" slot-scope="test">{{ ...

  8. vue slot插槽v-show不控制显示隐藏

    vue中想控制插槽的显示隐藏,用v-show是不起任何作用的,改用v-if 可以生效.

  9. 8.Vue组件三---slot插槽

    主要内容:  1. 什么是插槽 2. 组件的插槽 3. 插槽的使用方法 4. 插槽的具名 5. 变量的作用域 6. slot的作用域 一. 什么是插槽呢? 1. 生活中的插槽有哪些呢? usb插槽, ...

随机推荐

  1. 【374】Adobe Acrobat 操作技巧

    1. 文件内容增减 参考:如何在PDF文件中删除页面 参考:如何旋转.移动.删除和重新编号 PDF 页面 双击PDF文档,并在预览程序中打开它. 如果在其他程序(如Adobe Reader)中打开文档 ...

  2. sqlalchemy 学习-- 多表操作

    一对多:一对一 # one -- many class Students(Base): __tablename__ = "students" sid = Column(Intege ...

  3. iOS 两个页面之间的跳转

    -------->-------->-------->-------->-------->-------->-------->   以上完成页面one跳到页面 ...

  4. C# 监测每个方法的执行次数和占用时间（测试1）

    在Nuget引用 Castle.DynamicProxy 和 Newtonsoft.Json 这个 原文:http://www.cnblogs.com/RicCC/archive/2010/03/15 ...

  5. 学习JS的心路历程-函式（一）

    前几天有间单提到该如何声明函式及在Hositing中会发生什么事,但是函式的奥妙不仅于此. 身为一个使用JS的工程师,我们一定要熟悉函式到比恋人还熟! 这几天将会把函式逐一扒开跟各位一起探讨其中的奥妙 ...

  6. ADO.Net 综合练习题

    题目: 第一部分: 新建一个数据库:ADO测试,包含下面两个数据表,使用代码创建,并保留创建的代码文本. 专业表Subject: 专业编号(SubjectCode):nvarchar类型,不能为空,主 ...

  7. 手机端head部分

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  8. array_column 低版本兼容

    function i_array_column($input, $columnKey, $indexKey=null){ if(!function_exists('array_column')){ $ ...

  9. Mysql 5.7 忘记root密码或重置密码的详细方法

    在Centos中安装完MySQL数据库以后,不知道密码,这可怎么办,下面给大家说一下怎么重置密码 在Centos中安装完MySQL数据库以后,不知道密码,这可怎么办,下面给大家说一下怎么重置密码 1. ...

  10. cdnbest如何配置ssl证书

    cdnbest添加ssl证书有三种方式: 一.第一种在站点设置中添加: 点打开,加入证书后点提交 可以点检测功能检查证书是否有效,打勾说明证书是有效的 二. 第二种是在域名记录里添加: 如下图点击,添 ...