Vue slot用法(小结)

2024-09-28 13:15:25

之前看官方文档，由于自己理解的偏差，不知道slot是干嘛的，看到小标题，使用Slot分发内容，就以为是要往下派发内容。然后就没有理解插槽的概念。其实说白了，使用slot就是先圈一块地，将来可能种花种菜，也有可能在这块地上建房子。然而slot可以以一当十，可以插入很多东西。不知明白否？

由于项目经验有限，这篇我就先跟着官网的知识点走，当然会加入自己的部分项目代码。

关于slot是这样说的，

除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。

最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

单个 Slot

在子组件内使用特殊的<slot>元素就可以为这个子组件添加一个 slot (插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容.示例代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>

</head>
<body>

  <div id="app">
    <child-component>
      <p>分发的内容</p>
      <p>更多分发的内容</p>
    </child-component>
  </div>

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

  <script>

    Vue.component('child-component', {
      template: '\
      <div>\
        <slot>\
          <p>如果父组件没用插入内容,我将作为默认出现</p>\
        </slot>\
      </div>'
    });

    var app = new Vue({
      el: '#app'
    })

  </script>

</body>
</html>

子组件 child-component 的模板内定义一个 <slot> 元素,并且用一个 <p> 作为默认的内容,在父组件没有使用 slot 时,会渲染这段默认的文本;如果写入了 slot ,那就会替换整个 <slot>.所以上列渲染后的结果为:

<div id="app">
   <div>
    <p>分发的内容</p>
    <p>更多分发的内容</p>
  </div>
</div>

注意:子组件<slot>内的备用内容,它的作用域时子组件本身.

具名 Slot

给 <slot> 元素指定一个 name 后可以分发多个内容,具名 Slot 可以与单个 Slot 共存,例如下面的示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例</title>

</head>
<body>

  <div id="app">
    <child-component>
      <h2 slot="header">标题</h2>
      <p>正文内容</p>
      <p>更多正文内容</p>
      <div slot="footer">底部信息</div>
    </child-component>
  </div>

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

  <script>

    Vue.component('child-component', {
      template: '\
      <div class="component">\
        <div class="header">\
          <slot name="header"></slot>\
        </div>\
        <div class="main">\
          <slot></slot>\
        </div>\
        <div class="footer">\
          <slot name="footer"></slot>\
        </div>\
      </div>'
    });

    var app = new Vue({
      el: '#app'
    })

  </script>

</body>
</html>

子组件内声明了3个 <slot> 元素,其中在<div class="main">内的<slot> 没用使用 name 特性,它将作为默认 slot 出现,父组件没有使用 slot 特性的元素与内容都将出现在这里.

如果没有指定默认的匿名 slot, 父组件内多余的内容片段都将被抛弃.

上例最终渲染后的结果为:

<div id="app">
    <div class="container">
      <div class="header">
        <h2>标题</h2>
      </div>
      <div class="main">
        <p>正文内容</p>
        <p>更多的正文内容</p>
      </div>
      <div class="footer">
        <div>底部信息</div>
      </div>
    </div>
  </div>

在组合使用组件时,内容分发API至关重要.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue 组件中slot插口的具体用法

子组件 <template> <div class="slotcontent"> <ul>  <li v-for="item in items">{{item.text}}</li> </ul> </div> </template> <script> export default{ d
Vue组件中slot的用法

下面给大家介绍Vue组件中slot的用法主要是让组件的可扩展性更强. 1. 使用匿名slot 2. 给slot加个名字如果不在有slot的组件里加入任何标签,slot什么都不会显示的. 总结以上所述是小编给大家介绍的Vue组件中slot的用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: 详解Vue学习笔记入门篇之组件的内容分发(slot) Vue.js中组件中的slot实例详解 Vuejs第十一篇组件之
Vue slot用法(小结)

之前看官方文档,由于自己理解的偏差,不知道slot是干嘛的,看到小标题,使用Slot分发内容,就以为是要往下派发内容.然后就没有理解插槽的概念.其实说白了,使用slot就是先圈一块地,将来可能种花种菜,也有可能在这块地上建房子.然而slot可以以一当十,可以插入很多东西.不知明白否? 由于项目经验有限,这篇我就先跟着官网的知识点走,当然会加入自己的部分项目代码. 关于slot是这样说的, 除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃.当子组件模板只有一个没有属性
详解Vue.js 作用域、slot用法（单个slot、具名slot）

作用域在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component> 这里的message就是一个slot,但是它绑定的是父组件的数据,而不是组件< child-component >的数据. 父组件模板的内容是在父组件作用域内编译,子组件模板的内容是在子组件作用域内编译. <div id="app"> <child-co
vue filter的四种用法小结

目录 filter的用法小结 filter的基本用法 filter的用法小结使用计算属性app.js var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pe
Vue props用法详解(小结)

Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat
Vue.js用法详解

vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前言前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V
vue slot 在子组件中显示父组件传递的模板

父组件使用没有指定slot属性,默认为default 在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body&
Vue3中插槽(slot)用法汇总(推荐)

目录什么是插槽默认内容具名插槽动态插槽名作用域插槽作用域插槽具名作用域插槽写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽简单来说就是子组件中的提供给父组件使用的一个坑位 ,用 <slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码然后子组件中 <slot></slot> 就会被替换成这些内容.比如一
Java中String.split()用法小结

在java.lang包中有String.split()方法,返回是一个数组我在应用中用到一些,给大家总结一下,仅供大家参考: 1.如果用"."作为分隔的话,必须是如下写法,String.split("\\."),这样才能正确的分隔开,不能用String.split("."); 2.如果用"|"作为分隔的话,必须是如下写法,String.split("\\|"),这样才能正确的分隔开,不能用String.s
mybatis 中 foreach collection的用法小结(三种)

foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach元素的属性主要有 item,index,collection,open,separator,close. item表示集合中每一个元素进行迭代时的别名, index指定一个名字,用于表示在迭代过程中,每次迭代到的位置, open表示该语句以什么开始, separator表示在每次进行迭代之间以什么符号作为分隔符, close表示以什么结束. 在使用foreach的时候
JS产生随机数的用法小结

代码如下所述: <script> function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } var num = GetRandomNum(1,10); alert(num); </script> var chars = ['0','1','2','3','4','5','6','7','8','

Vue slot用法(小结)

相关推荐

随机推荐