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. 剑指offer:滑动窗口的最大值(栈和队列)

    1. 题目描述 /* 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值. 例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别 ...

  2. 如果对象的引用被置为null,;垃圾回收器是否会立即释放对象占用的内存?

    不会,在下一个垃圾回调周期中,这个对象将是被可回收的. 也就是说并不会立即被垃圾收集器立刻回收,而是在下一次垃圾回收时才会释放其占用的内存.

  3. Python基础-day02-3

    循环 目标 程序的三大流程 while 循环基本使用 break 和 continue while 循环嵌套 01. 程序的三大流程 在程序开发中,一共有三种流程方式: 顺序 -- 从上向下,顺序执行 ...

  4. vs中 Stack around the variable 'XXX' was corrupted.

    https://blog.csdn.net/hou09tian/article/details/75042206 把 project->配置属性->c/c++->代码生成->基 ...

  5. (二十三)golang--内置函数

    1.用于求长度,占多少个字节 2.内置函数new:分配内存,主要用来分配值类型,比如int.float等,其第一个实参为类型,而非值,其返回值为指向该类型的新分配的零值的指针: 3.make:用来分配 ...

  6. QQ音乐2019客户端-获取任意歌单完整歌曲列表和下载音乐文件方法

    步骤 1.在web网站上搜搜任意歌单 https://y.qq.com/#type=index/ 例如:中国好声音4.5.6.7.8季 打开后显示网址:  https://y.qq.com/n/yqq ...

  7. php json_decode无法处理\解决方法

    php json_decode无法处理\解决方法 <pre>$aa=urlencode('eee\ee');$dfda='[{"company":"测试&qu ...

  8. 明解C语言 入门篇 第十二章答案

    练习12-1 /* 用表示学生的结构体来显示高尾的信息 */ #include <stdio.h> #define NAME_LEN 64 /* 姓名的字符数 */ /*=== 表示学生的 ...

  9. Winform中设置ZedGraph多条Y轴时与多条曲线一一对应

    场景 Winform中实现ZedGraph的多条Y轴(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1001322 ...

  10. STorM32 BGC三轴云台控制板电机驱动电路设计(驱动芯片DRV8313)

    1  序言 相信对云台有兴趣的小伙伴对STorM32 BGC这块云台控制板并不陌生,虽说这块控制板的软件已经不再开源,但是在GitHub上依旧可以找到两三个版本的代码,而硬件呢我们也可以从Olliw( ...