首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

vue 插槽简介及使用示例

Posted in Vue.js onNovember 19, 2020

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>

效果

vue 插槽简介及使用示例

<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 插槽的资料请关注三水点靠木其它相关文章！

vue 插槽简介及使用示例

- Author -

文鹏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
详解Vue的mixin策略
Nov 19 #Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 #Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 #Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
vue在图片上传的时候压缩图片
Nov 18 #Vue.js
mysql(6) Vscode(3) 2022年7月新番(1) 人人对战(1) SSH(3) 数据表(1) 双人对弈(1) OVERLORD(1) 时钟(1) 算法(1)
You might like
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
JavaScript常用数学函数用法示例
2018/05/14 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python 流程控制实例代码
2009/09/25 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
python 8种必备的gui库
2020/08/27 Python
如何基于Python按行合并两个txt
2020/11/03 Python
python实现控制台输出颜色
2021/03/02 Python
双立人美国官方商店：ZWILLING集团餐具和炊具
2020/05/07 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
服务整改报告
2014/11/06 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
《原神》新角色演示“神里绫人：林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏
Win11 引入 Windows 365 云操作系统，适应疫情期间混合办公模式：启动时直接登录、模
2022/04/06 数码科技