8.Vue的slot
1.什么是slot
在 Vue.js 中我们使用 <slot> 元素作为承载分发内容的出口，作者称其为 插槽，可以应用在组合组件的场景中
2.使用
建立组件预留插槽
定义填充入插槽的组件
实例化Vue并初始化数据
将值填充入插槽
<!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.自定义事件内容分发
- 在填充的组件template中添加标签并绑定组件自定义方法
- 在Vue的实例化对象中添加方法
- 在视图层标签内使用v-on来绑定Vue的实例化对象中的方法
- 在填充组件的自定义方法中触发视图层绑定的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的更多相关文章
- vue之slot，组件标签嵌套
vue之slot,组件标签嵌套 插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的. <el-col > <el-checkbox & ...
- Vue 之 slot(插槽）
前言: vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧 ...
- 玩转vue的slot内容分发
vue的内容分发非常适合"固定部分+动态部分"的组件的场景,固定部分可以是结构固定,也可以是逻辑固定,比如下拉loading,下拉loading只是中间内容是动态的,而拉到底部都会 ...
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- vue中slot插槽
插槽就是vue实现的一套内容分发的API,将插槽元素作为承载分发内容的出口. 也就是说在组件模板中默认占用一个位置,当使用组件标签时候,组件标签的内容就会自动替换掉内容 slot中可以设置一些默认的内 ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- vue 插槽slot
本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...
- vue 使用Slot 分发内容 学习总结。
https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容 官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...
- Vue插槽 slot
1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...
- vue插槽slot的理解与使用
一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...
随机推荐
- a 标签 pointer-events
a 标签渲染到也页面之后,由于某些原因需要,禁用. 有两种方法可以设置禁用效果. 1.使用 CSS 属性 pointer-events ,设置此属性为 none 之后,元素将不会成为鼠标事件的 tar ...
- 数据仓库005 - 复习Linux shell命令 - crontab调度 sh脚本 后台执行 软连接
一.crontab调度 对于linux 自带crontab而言, xxx.sh的一般编写格式以#!/bin/bash 解释器开头,可在脚本中加入: date 但是,shell脚本执行 需要 ...
- 安装更新时出现一些问题，但我们稍后会重试。如果你继续看到此错误，并且想要搜索 Web 或联系支持人员以获取相关信息，以下信息可能会对你有帮助: (0x80070426)
安装更新时出现一些问题,但我们稍后会重试.如果你继续看到此错误,并且想要搜索 Web 或联系支持人员以获取相关信息,以下信息可能会对你有帮助: (0x80070426) https://answers ...
- python正则图片爬取
# conding:utf8 import requests import re import time if __name__ == "__main__": # 所有的数据 ur ...
- 关于使用IDEA,使用Maven打包项目
关于使用IDEA,使用Maven打包项目 在近期的一个接口项目中,使用的是SpringBoot + Maven的配置, 由于使用IDEA不久,不太熟悉使用Maven进行项目打包.记录一下. 由于使用的 ...
- 动画展现十大经典排序算法（附Java代码）
0.算法概述 0.1 算法分类 十种常见排序算法可以分为两大类: 比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此也称为非线性时间比较类排序. 非比较类排序: ...
- Spring Security OAuth2 Demo —— 客户端模式（ClientCredentials）
前情回顾 前几节分享了OAuth2的流程与其它三种授权模式,这几种授权模式复杂程度由大至小:授权码模式 > 隐式授权模式 > 密码模式 > 客户端模式 本文要讲的是最后一种也是最简单 ...
- Linux(CentOS)启动时自动执行脚本(rc.local)
下面说说通过rc.local文件进行开机启动 1.首先创建一个启动脚本,这里以启动docker为例 创建 docker-startup.sh 脚本 #! /bin/bash /usr/bin/mk-d ...
- yum 找不到程序，yum更换国内阿里源
使用百度云服务器,发现百度yum源非常不稳定,果断采用阿里源,操作步骤如下: 一.备份 $ cd /etc/yum.repos.d/ $ mv baidu-bcm.repo baidu-bcm.rep ...
- ocelot性能测试
网上搜索发现多篇文章指出ocelot的性能有问题,可是在ocelot项目issue提问中,维护者指出,ocelot的性能问题不大.瓶颈在于.net的httpclient. 我参考文章 https:// ...