slot内容分发

slot 内容分发:为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。

比如我们遇到组件需要相互嵌套这样的情况:

App.vue 文件

<template>
    <div class="app">
        <Hello>
          <World></World>
          <Vue></Vue>
        </Hello>
    </div>
</template>

Hello.vue 文件

<template>
    <div class="hello">
        <h3>我是 hello 组件</h3>
    </div>
</template>

那这么直接写是肯定只显示 <Hello> 组件的内容

所以就需要用到 slot 插口,否则该组件标签中的内容将会被丢弃

一、 单个插槽

只需要在 Hello.vue 文件内写入 <solt></slot> 标签

<template>
    <div class="hello">
        <h3>我是 hello 组件</h3>
        <slot>此处可自定义内容,如果该组件的标签内没有内容,则显示此内容</slot>
    </div>
</template>

注意:<solt></slot> 标签内是可以自定义内容的,如果在调用的 <Hello></Hello> 标签内没有写入任何内容,则显示 <solt></slot> 标签内的自定义内容,否则显示在调用的 <Hello></Hello> 标签内写入的内容

二、多个插槽

假如我们想要改变 <Hello></Hello> 组件内 <World></World><Vue></Vue> 的显示位置,就可以用到一个特殊的特性 name 来进一步配置如何分发内容,多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。

App.vue 文件

<template>
    <div class="app">
        <Hello>
          <World slot="world"></World>
          <h5>我是备用插槽内部显示的内容</h5>
          <Vue slot="vue"></Vue>
        </Hello>
    </div>
</template>

Hello.vue 文件

<template>
    <div class="hello">
        <slot name="vue"></slot>
        <h3>我是 hello 组件</h3>
        <slot name="world"></slot>
        <slot></slot>
    </div>
</template>

最后渲染显示为

三、作用域插槽
1. 作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。

在子组件中,slot 插槽还可以用作传递数据,类似于用 prop 来传递数据

在子组件 Hello.vue 中,只需要将需要传递的内容写入插槽中

<template>
    <div class="hello">
        <h3>我是 hello 组件</h3>
        <!-- text 和 text1 是自定义的,可以随便写 -->
        <slot text="我是hello" text1="组件的数据"></slot>
    </div>
</template>

<slot text="我是hello" text1="组件的数据"></slot> 相当于被渲染为

{
    text:‘我是hello‘,
    text1:‘组件的数据‘
}

在 App.vue 中调用 Hello 组件时,通过在 template 中写入 slot-scope 特殊属性来获取数据

<template>
    <div class="app">
        <Hello>
          <!-- template 是该作用域插槽的模版, slot-scope是一个特殊属性,用来接收 hello 组件中插槽传过来的值 -->
          <template slot-scope="hello">
            <!-- 通过访问一个 json 的方式访问 hello 中 slot 传过来的值 -->
            <span>{{hello.text}} + {{hello.text1}}</span>
          </template>
        </Hello>
    </div>
</template>

注意:在 vue 2.5.0以上版本,就不需要用到 template 模板了,slot-scope 可以作用在任意元素中

被渲染的结果为:

2. 更典型的用例是在列表组件中,允许使用者自定义如何渲染列表的每一项

在 App.vue 组件内

<template>
    <div class="app">
      <!-- 在子组件绑定 items 把父组件的数据传给子组件 -->
        <Hello :items="items">
          <li slot="item" slot-scope="bbb">
            {{ bbb.text }}
          </li>
        </Hello>
    </div>
</template>

<script>
// 引入 Hello 组件
import Hello from ‘./assets/components/Hello.vue‘
export default {
  data(){
    return {
      items:[
        {text:‘aaaaaa‘},
        {text:‘bbbbb‘}
      ]
    }
  },
  // 注册 Hello 组件
  components:{
    Hello
  }
}
</script>

在 Hello.vue 组件中

<template>
    <div class="hello">
        <ul>
            <!-- 此处的 items 为父组件传过来的数据 -->
            <!-- text 为 item 内的对应数据,因为 items 是一个对象,所以要用到绑定,否则页面上直接渲染出来的内容为 item.text -->
            <slot name="item" v-for="item in items" text="item.text"></slot>
        </ul>
    </div>
</template>

<script>
export default {
    // 接收父组件传过来的 items 数据
    props: [‘items‘],
}
</script>

渲染结果为:

原文地址:https://www.cnblogs.com/wu971023-/p/9037686.html

时间: 2024-10-09 09:17:26

slot内容分发的相关文章

slot内容分发的使用

一.定义了一个组件custom,该组件本身已经具备template模板了,直接调用<custom></custom>即可渲染模板 <div id="app"> <custom></custom> </div> <script> Vue.component('custom',{ template:` <div class="customStyle"> <p>cu

Vue内容分发slot

前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 “transclusion” ).Vue实现了一个内容分发 API,参照了当前 Web 组件规范草案,使用特殊的 <slot> 元素作为原始内容的插槽.本文将详细介绍Vue内容分发slot 编译作用域 在深入内容分发 API 之前,先明确内容在哪个作用域里编译.假定模板为 <child-component> {{ message }} </child-compone

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

Vue一个案例引发「内容分发slot」的最全总结

今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做了一个项目,然后通过项目中的一些案例进行总结. 今天我们来说说 Vue 中的内容分发 <slot>,首先 Vue 实现了一套内容分发的 API,这套 API 是基于当前的 Web Components 规范草案,将 <slot> 元素作为承载内分发内容的出口,内容分发是 Vue 中一个

组件(4):使用slot进行内容分发

组件的作用域(一) 父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译. 父子组件的编译相互独立,编译时只能使用各自作用域中的属性和方法,例如,你不可以在父组件模板内,将一个指令绑定到子组件的属性或方法上.如果这么做控制台会报一个属性未定义的错误. 如果想要绑定一个指令以便控制子组件的行为,那么你可以在子组件的模板内,将一个指令绑定到子组件的属性或方法上:或者在父组件的模板内,将指令绑定到父组件的属性或方法上. new Vue({ el: '#app-2', data:

Vue:Axios异步通信、计算属性、内容分发、自定义事件

1. Axios 什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API [JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF(跨站请求伪造) GitHub:https://github.com/axios/axio

CDN(内容分发网络)技术原理

原文转自:http://kb.cnblogs.com/page/121664/ 1. 前言 Internet的高速发展,给人们的工作和生活带来了极大的便利,对Internet的服务品质和访问速度要求越来越高,虽然带宽不断增加,用户数量也在不断增加,受Web服务器的负荷和传输距离等因数的影响,响应速度慢还是经常抱怨和困扰.解决方案就是在网络传输上利用缓存技术使得Web服务数据流能就近访问,是优化网络数据传输非常有效的技术,从而获得高速的体验和品质保证. 网络缓存技术,其目的就是减少网络中冗余数据的

CDN 内容分发网络

CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接.负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上.其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度. 一.

[转]CDN(内容分发网络)技术原理

1. 前言 Internet的高速发展,给人们的工作和生活带来了极大的便利,对Internet的服务品质和访问速度要求越来越高,虽然带宽不断增加, 用户数量也在不断增加,受Web服务器的负荷和传输距离等因数的影响,响应速度慢还是经常抱怨和困扰.解决方案就是在网络传输上利用缓存技术使得Web服 务数据流能就近访问,是优化网络数据传输非常有效的技术,从而获得高速的体验和品质保证. 网络缓存技术,其目的就是减少网络中冗余数据的重复传输,使之最小化,将广域传输转为本地或就近访问.互联网上传递的内容,大部