vue学习笔记之作用域插槽实例分析

2024-10-17 06:41:22

本文实例讲述了vue学习笔记之作用域插槽。分享给大家供大家参考，具体如下：

<child></child>

Vue.component('child', {
   data: function () {
     return {
       list: [1, 2, 3]
     }
   },
   template: '<div>
          <ul>
            <li v-for="item of list">{{item}}</li>
          </ul>
         </div>'
})

那么，我们要想让父组件每一次调用子组件时再定义显示方式，也就是说，在子组件中定义好了v-for循环了list，具体怎么显示，由父组件告诉我。那么在子组件中定义一个slot插槽，在父组件中添加一个作用域插槽【需要用template包裹】，在其内写显示的样式。

父组件需要得到子组件数据时，就需要template标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue中作用域插槽</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <child>
    <template slot-scope="props">
      <li>{{props.item}}</li><!--我想渲染成列表形式-->
    </template>
  </child>
</div>
</body>
</html>
<script>
  Vue.component('child', {
    data: function () {
      return {
        list: [1, 2, 3]
      }
    },
    template: '<div><ul><slot v-for="item of list" :item="item">{{item}}</slot></ul></div>'
  })
  var vm = new Vue({
    el: '#app'
  })
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Vue作用域插槽slot-scope实例代码

vue中的插槽有三种:单个插槽.具名插槽.作用域插槽,这个在官网上能看到 (https://cn.vuejs.org/v2/guide/components.html#单个插槽) 作用域插槽简单来说就是父组件只管显示样式,数据由子组件来提供.比如上面的代码,el-table-column内的template是传递给其内部solt的显示内容,但是scope的值是由el-table-column内部solt绑定的数据返回的.这个数据具体是什么由el-table-column中指定,类似: <slot
从组件封装看Vue的作用域插槽的实现

作用域插槽不是那么直观的一个概念.Vue文档使用了一段描述性的话来解释作用域插槽: 有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽 -- 但是在我们应用的某些部分,我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西.这也是作用域插槽的用武之地. 但在我看来,至少是第一次读到的时候,这段话相当不好理解.插槽不是分发内容到子组件吗,为什么还要从子组件中获取数据?不是已经有了通过emit事件的方法从子组件向父组件传递数据吗,为什么需要它?作用域插槽到底是来干嘛的?-
详解vue slot插槽的使用方法

官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观 <!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"><
vue中slot（插槽）的介绍与使用

什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性.插槽显不显示.怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制 Vue slot 原理在web-components中有slot的概念,https://developers.google.com/web/fundamentals/web-components/shadowdom. <slot> 元素 Shado
vue插槽slot的理解和使用方法

前言 Vue的slot插槽,可以从字面意思来了解用途,占用占坑的意思,既然是占坑肯定是先占坑后面有其他具体的内容来替换代替.根据slot的应用场景可以分为匿名slot和具名slot. 一.个人理解及插槽的使用场景刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是"父组件向子组件传递dom时会用到插槽",这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了.后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去
详解Vue 匿名、具名和作用域插槽的使用方法

Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的.Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法. 匿名插槽子组件定义 slot 插槽,但并未具名,因此也可以说是默认插槽.只要在父元素中插入的内容,默认加入到这个插槽中去.
浅析vue插槽和作用域插槽的理解

插槽: 插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实.以及怎样显示由父组件来决定. 插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制.但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块.这样就使组件可复用性更高,更加灵活.我们可以随时通过父组件给子组件加一些需要的东西. 这个可以参考https://www.jb51.net/article/160047.htm.这位
如何理解Vue的作用域插槽的实现原理

本文介绍了如何理解Vue的作用域插槽的实现原理,分享给大家,也给自己留个笔记举个例子,比如我写了一个可以实现条纹相间的列表组件,发布后,使用者可以自定义每一行的内容或样式(普通的slot就可以完成这个工作).而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数,具体看案例和注释. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
详解Vue组件之作用域插槽

写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示子组件模板中定义的"<p>父组件如果没有插入内容,我将被显示</p>"这一则内容,但如果<child-component></child-component>标签之间有插入内容的话,则子组件模板中的<slot></slot&
Vue插槽原理与用法详解

本文实例讲述了Vue插槽原理与用法.分享给大家供大家参考,具体如下: 1 插槽内容 Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 它允许你像这样合成组件: <div id="app1"> <navigation-link url="/profile"> Your Profile </navigation-link>
Vue匿名插槽与作用域插槽的合并和覆盖行为

Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段中有对应 slot 特性的元素. 仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽. 具体应用的时候: 1.匿名插槽的合并行为: <div id="app"> <myele> <div> default slot </div

vue学习笔记之作用域插槽实例分析

相关推荐

随机推荐