vue 插槽简介及使用示例

2024-10-09 21:02:26

Vue的插槽，是一种内容分发机制，但是我感觉它更加像组件的一种占位符的概念，通过插槽，等待组件外部传入复杂的内容。

使用插槽的好处

在以前的例子中todo-item插槽直接写在了todo-list插槽中，其实是比较不合理的，它会导致todo-list插槽比较死板，无法重用更多的其他组件。

 Vue.component("todo-list", {
    template: `
        <ul>
          <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
        </ul>
      `,
    data: function() {
     return {

     };
    },
    methods:{

    }
   });

通过插槽化改造，则可以允许使用todo-list组件的用户自行的传入想要使用的todo-item，而不是一个固定的内容。

插槽改造过程

改造示例：

将todo-item组件从todo-list组件中移除，放到页面的html代码中。
将todo-list组件中原todo-item的位置修改为
因为todo-item移到了页面html代码中，所以需要将todo-list的data中的list，移回全局vue中，防止组件找不到list导致v-for报错；handleDelete同理也要移至全局vue中

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del"></todo-item>
    </todo-list>
  </div>

  <script>
   Vue.component("todo-list", {
    template: `
        <ul>
          <slot></slot>
        </ul>
      `,
    data: function() {
     return {

     };
    },
    methods:{

    }
   });
   Vue.component("todo-item", {
    props: {
     title: String,
     del: {
      type: Boolean,
      default: false
     }
    },
    template: `
       <li>
         <span v-if="!del">{{title}}</span>
         <span v-else style="text-decoration:line-through">{{title}}</span>
         <button v-show="!del" @click="handleClick">删除</button>
       </li>`,
    data: function() {
     return {};
    },
    methods: {
      handleClick(){
        console.log("点击删除按钮！");
        this.$emit('delete',this.title);
      }
    }
   });
   var vm = new Vue({
    el: "#app",
    data: {
      list: [
       {
        title: "新课程1",
        del: false
       },
       {
        title: "新课程2",
        del: true
       },
       {
        title: "新课程3",
        del: false
       }
      ]
    },
    methods: {
      handleDelete(vtitle){
        console.log("删除工程！",vtitle)
      }
    }
   });
  </script>
 </body>
</html>

效果和改造前是一模一样的。

插槽的种类

处理默认插槽外，还有具名插槽，作用域插槽等等。

所谓的具名插槽就是指带有名称的插槽，解决的是一个组件中存在多个插槽的业务场景。比如有一个母版页组件，希望区分页头，页尾和页面主体。实现如下效果：

<div class="container">
 <header>
  <!-- 我们希望把页头放这里 -->
 </header>
 <main>
  <!-- 我们希望把主要内容放这里 -->
 </main>
 <footer>
  <!-- 我们希望把页脚放这里 -->
 </footer>
</div>

那么这个组件应该这样编写

<div class="container">
 <header>
  <slot name="header"></slot>
 </header>
 <main>
  <slot></slot>
 </main>
 <footer>
  <slot name="footer"></slot>
 </footer>
</div>

具体调用组件的位置，则有两种写法：

一种是2.6之前的写法。

<组件名>
<p slot="header">头部段落</p>
<p>主段落</p>
<p slot="footer">尾部段落</p>
</组件名>

一种是2.6之后的写法

<组件名>
<template v-slot:header>
  <p>头部段落</p>
</template>
<p>主段落</p>
<template v-slot:footer>
  <label>尾部段落</label>
</template>
</组件名>

按照2.6之后的写法，我们尝试将todo-item组件中增加一个前置lable和后置lable

在todo-item组件的template中的html中增加slot插槽，并标记名称
html页面的组件调用位置，使用template和v-slot的语法插入内容

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext>
          <label>前置文字</label>
        </template>
        <template v-slot:suftext>
          <label>后置文字</label>
        </template>
      </todo-item>
    </todo-list>
  </div>

  <script>
   Vue.component("todo-list", {
    template: `
        <ul>
          <slot></slot>
        </ul>
      `,
    data: function() {
     return {

     };
    },
    methods:{

    }
   });
   Vue.component("todo-item", {
    props: {
     title: String,
     del: {
      type: Boolean,
      default: false
     }
    },
    template: `
       <li>
         <slot name="pretext"></slot>
         <span v-if="!del">{{title}}</span>
         <span v-else style="text-decoration:line-through">{{title}}</span>
         <button v-show="!del" @click="handleClick">删除</button>
         <slot name="suftext"></slot>
       </li>`,
    data: function() {
     return {};
    },
    methods: {
      handleClick(){
        console.log("点击删除按钮！");
        this.$emit('delete',this.title);
      }
    }
   });
   var vm = new Vue({
    el: "#app",
    data: {
      list: [
       {
        title: "新课程1",
        del: false
       },
       {
        title: "新课程2",
        del: true
       },
       {
        title: "新课程3",
        del: false
       }
      ]
    },
    methods: {
      handleDelete(vtitle){
        console.log("删除工程！",vtitle)
      }
    }
   });
  </script>
 </body>
</html>

作用域插槽：作用域插槽可以接收子组件传递的值，并根据不同的值显示不同的内容。如根据用户根据返回的值控制样式信息。

作用域插槽示例：

为todo-item的data属性增加返回值vRandom

data: function() {
  return {
    vrandom:Math.random()
  };
},

在todo-item的template的html中通过v-bind绑定组件中的属性。

template: `
  <li>
    <slot name="pretext" :val="vrandom"></slot>
    <span v-if="!del">{{title}}</span>
    <span v-else style="text-decoration:line-through">{{title}}</span>
    <button v-show="!del" @click="handleClick">删除</button>
    <slot name="suftext"></slot>
  </li>`,

在使用组件时通过模板语法调用绑定的变量

  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
        <template v-slot:suftext>
          <label>后置文字</label>
        </template>
      </todo-item>
    </todo-list>
  </div>

全部html代码为

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <body>
  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
        <template v-slot:suftext>
          <label>后置文字</label>
        </template>
      </todo-item>
    </todo-list>
  </div>

  <script>
   Vue.component("todo-list", {
    template: `
        <ul>
          <slot></slot>
        </ul>
      `,
    data: function() {
     return {

     };
    },
    methods:{

    }
   });
   Vue.component("todo-item", {
    props: {
     title: String,
     del: {
      type: Boolean,
      default: false
     }
    },
    template: `
       <li>
         <slot name="pretext" :val="vrandom"></slot>
         <span v-if="!del">{{title}}</span>
         <span v-else style="text-decoration:line-through">{{title}}</span>
         <button v-show="!del" @click="handleClick">删除</button>
         <slot name="suftext"></slot>
       </li>`,
    data: function() {
     return {
       vrandom:Math.random()
     };
    },
    methods: {
      handleClick(){
        console.log("点击删除按钮！");
        this.$emit('delete',this.title);
      }
    }
   });
   var vm = new Vue({
    el: "#app",
    data: {
      list: [
       {
        title: "新课程1",
        del: false
       },
       {
        title: "新课程2",
        del: true
       },
       {
        title: "新课程3",
        del: false
       }
      ]
    },
    methods: {
      handleDelete(vtitle){
        console.log("删除工程！",vtitle)
      }
    }
   });
  </script>
 </body>
</html>

组件的插槽还有一种带默认值的用法：在slot中增加默认内容

template: `
  <li>
    <slot name="pretext" :val="vrandom"></slot>
    <span v-if="!del">{{title}}</span>
    <span v-else style="text-decoration:line-through">{{title}}</span>
    <button v-show="!del" @click="handleClick">删除</button>
    <slot name="suftext">默认尾部</slot>
  </li>`,

如果调用组件时没有在插槽位置插入内容，则html展示以默认内容进行填充，如果有插内容则以插入值填充。

  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
        <template v-slot:suftext>
          <label>后置文字</label>
        </template>
      </todo-item>
    </todo-list>
  </div>

效果

  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
        <template v-slot:suftext>
        </template>
      </todo-item>
    </todo-list>
  </div>

或者

  <div id="app">
    <todo-list>
      <todo-item v-on:delete="handleDelete" v-for="item in list" data-wen="wen" :title="item.title" :del="item.del">
        <template v-slot:pretext="{val}">
          <label>前置文字{{val}}</label>
        </template>
      </todo-item>
    </todo-list>
  </div>

以上就是vue 插槽简介及使用示例的详细内容，更多关于vue 插槽的资料请关注我们其它相关文章！

vue中的 $slot 获取插槽的节点实例

vue 中的 $slot 以前一直不知到这个东西,后来发现 vue api 中藏着很多的很神奇的 api,比如这个具名插槽很好理解,但是那个 default 就有点难了, 写了一个炒鸡简单的 demo father: <template> <div> <button @click="getSlot">getSlot</button> <try ref="try"> <div class=&quo
vue+element-ui表格封装tag标签使用插槽

我们知道有很多系统都要求表格中添加各种各样的tag,来标记一些属性.在element-ui中添加tag很简单,最重要的就是用到了vue的插槽slot这个特性.首先了解什么是插槽. 插槽省去官方的复杂讲解和代码,插槽的意思简单来说,就是在子组件的某个地方留一个占位符,当父组件使用这个子组件的时候,可以自定义这个占位符所占地方呈现的样子,可能是一个标题,一个按钮,甚至一个表格,一个表单. 为什么要插槽呢?我们抽离组件的原因就是因为可重复的代码太多了,当使用可复用的组件时,大大减少了复制粘贴.设想有
浅析vue插槽和作用域插槽的理解

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

1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法对做一下使用说明. slot插槽(不具名) <body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> <template id
详解Vue 匿名、具名和作用域插槽的使用方法

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

在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令).它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性.新语法的由来可查阅 RFC. 引vue官方文档之前做项目时,对插槽理解太少了,这两天学习时,才发现插槽更新用v-slot了,自己做了些简单总结,与大家分享一下~ 插槽我的理解就是父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置(匿名插槽,具名插槽) 插槽分类插槽一共就三大类 1.匿名
Vue插槽原理与用法详解

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

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

将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div> </son-tmp> 单个插槽父组件app.vue <template> <div id="app"> <test-slot> <span>我是父组件里的文字,但是我要被放到子组件里</span> </t
使用react context 实现vue插槽slot功能

首先来看下vue的slot的实现 <base-layout>组件,具名插槽name定义以及默认插槽 <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot n
Vue作用域插槽实现方法及作用详解

默认插槽和具名插槽的概念比较好理解,这里主要以官方文档的案例来讲解一下作用域插槽. 首先是有一个currentUser的组件: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

vue 插槽简介及使用示例

相关推荐

随机推荐