1.什么是slot

　　在  Vue.js  中我们使用  <slot>  元素作为承载分发内容的出口，作者称其为 插槽，可以应用在组合组件的场景中

2.使用

  1. 建立组件预留插槽

  2. 定义填充入插槽的组件

  3. 实例化Vue并初始化数据

  4. 将值填充入插槽

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="vue">

     <!--4.将值填充入插槽-->

     <todo>

         <todo-title slot="todo-title" v-bind:title="my_title"></todo-title>

         <todo-items slot="todo-items" v-for="(item, index) in my_Items"

                     v-bind:item="item" v-bind:index="index" v-bind:key="index" ></todo-items>

     </todo>

 </div>

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

 <script type="text/javascript">

     //1.建议预留插槽的组件

     Vue.component("todo",{

         template: '<div>\

                         <slot name="todo-title"></slot>\

                         <ul>\

                             <slot name="todo-items"></slot>\

                         </ul>\

                    </div>'

     });

     //2.定义填充入插槽的组件

     Vue.component("todo-title",{

         props: ['title'],

         template: '<div>{{title}}</div>'

     })

     Vue.component("todo-items",{

         props: ['item','index'],

         template: '<li>{{index+1}}.{{item}}</li>'

     })

     //3.实例化Vue并初始化数据

     var vm = new Vue({

         el: '#vue',

         data: {

             my_Items: ["java","C++","Python","PHP"],

             my_title: "学习Vue内容分发"

         }

     })

 </script>

 </body>

 </html>

3.自定义事件内容分发

  1. 在填充的组件template中添加标签并绑定组件自定义方法
  2. 在Vue的实例化对象中添加方法
  3. 在视图层标签内使用v-on来绑定Vue的实例化对象中的方法
  4. 在填充组件的自定义方法中触发视图层绑定的Vue实例化对象中的方法
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="vue">

     <todo>

         <todo-title slot="todo-title" v-bind:title="my_title"></todo-title>

         <!--3.在视图层标签内使用v-on来绑定Vue的实例化对象中的方法-->

         <todo-items slot="todo-items" v-for="(item, index) in my_Items"

                     v-bind:item="item" v-bind:index="index" v-bind:key="index"

                     v-on:remove="removeMyItems(index)"></todo-items>

     </todo>

 </div>

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

 <script type="text/javascript">

     Vue.component("todo",{

         template: '<div>\

                         <slot name="todo-title"></slot>\

                         <ul>\

                             <slot name="todo-items"></slot>\

                         </ul>\

                    </div>'

     });

     Vue.component("todo-title",{

         props: ['title'],

         template: '<div>{{title}}</div>'

     })

     Vue.component("todo-items",{

         props: ['item','index'],

         //1.在填充的组件template中添加标签并绑定组件自定义方法

         template: '<li>{{index+1}}.{{item}} ' +

             '<button @click="remove_component">删除</button></li>',

         methods: {

             //组件自定义的方法

             remove_component: function (index) {

                 //4.在填充组件的自定义方法中触发视图层绑定的Vue实例化对象中的方法

                 this.$emit('remove', index);

             }

         }

     })

     var vm = new Vue({

             el: '#vue',

             data: {

                 my_Items: ["java","C++","Python","PHP"],

                 my_title: "学习Vue内容分发"

             },

             methods: {

                 //2.在Vue的实例化对象中添加方法

                 removeMyItems: function (index) {

                     console.log("删除"+this.my_Items[index]+"成功");

                     // splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，其中 index 为添加/删除项目的位置，1 表示删除的数量

                     this.my_Items.splice(index, 1);

                 }

             }

         })

 </script>

 </body>

 </html>

8.Vue的slot的更多相关文章

  1. vue之slot，组件标签嵌套

    vue之slot,组件标签嵌套 插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的. <el-col > <el-checkbox & ...

  2. Vue 之 slot(插槽）

    前言: vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧 ...

  3. 玩转vue的slot内容分发

    vue的内容分发非常适合"固定部分+动态部分"的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会 ...

  4. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  5. vue中slot插槽

    插槽就是vue实现的一套内容分发的API,将插槽元素作为承载分发内容的出口. 也就是说在组件模板中默认占用一个位置,当使用组件标签时候,组件标签的内容就会自动替换掉内容 slot中可以设置一些默认的内 ...

  6. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  7. vue 插槽slot

    本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...

  8. vue 使用Slot 分发内容 学习总结。

    https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容    官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...

  9. Vue插槽 slot

    1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...

  10. vue插槽slot的理解与使用

    一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...

随机推荐

  1. docker 部署 HFish（集群部署）

    主节点部署: docker run -d --name hfish-master -p : -p : -p : -p : -p : -p : -p : -p : -p : -p : -p : -p : ...

  2. STM32移植ROS--发布超声波信息

    前言:之前ROS跟单片机的底层通讯主要是通过串口自定的协议来做,比如官网提供的arduino串口驱动一样,需要ROS往下发一个指令,单片机再回传一个指令,要写一大堆的协议,这样很麻烦,效率也比较低, ...

  3. mysql 创建用户, 分配权限, 删除用户

    通过create user 命令来创建用户, 有两种方式:(只介绍通过 create user 命令, 直接往user表中插入数据的方式,这里就不说了) 创建用户的同时, 指定用户可登录的主机和密码 ...

  4. LeetCode 841：钥匙和房间 Keys and Rooms

    题目: ​ 有 N 个房间,开始时你位于 0 号房间.每个房间有不同的号码:0,1,2,...,N-1,并且房间里可能有一些钥匙能使你进入下一个房间. ​ 在形式上,对于每个房间 i 都有一个钥匙列表 ...

  5. RoadMap：如何创建产品路线图

    (1)什么是Roadmap? RoadMap/产品路线图 Roadmap通常翻译为“路线图”或“蓝图”,目前并没有一个公认的定义.在这里,我们认为Roadmap是产品经理进行产品管理的一个中长期规划, ...

  6. Kubernetes service 三种类型/NodePort端口固定

    Kubernetes service 三种类型 • ClusterIP:默认,分配一个集群内部可以访问的虚拟IP(VIP)• NodePort:在每个Node上分配一个端口作为外部访问入口• Load ...

  7. windows下编写dll

    dll的优点 简单的说,dll有以下几个优点: 1) 节省内存.同一个软件模块,若是以源代码的形式重用,则会被编译到不同的可执行程序中,同时运行这些exe时这些模块的二进制码会被重复加载到内存中.如果 ...

  8. SpirngBoot整合Spring-data-JPA

    0.引言 使用SpringBoot data jpa技术相比mybatis是比较难的,这里只给出整合方法 1.引入SpringBoot data jpa <!--JPA依赖--> < ...

  9. mysql用查询结果当删除的判断条件进行删除报错1093 You can't specify target table解决方法

    mysql用查询结果当删除的判断条件进行删除报错1093 You can't specify target table解决方法 #分开两个sql执行正常的语句,只保留最新1000条数据,删掉1000条 ...

  10. Vue实战狗尾草博客管理系统第一章

    Vue实战狗尾草博客后台管理系统第一章 这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...