vue学习（四）插槽
一 匿名插槽
// 语法
Vue.component('MBtn', {
template: `
<button>
<slot></slot>
</button> `,
});
使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body> <div id="app">
<App></App>
</div> <script>
Vue.component('MBtn', {
template: `
<button>
<slot></slot>
</button> `,
}); const App = {
data() {
return {
msg: '数据'
}
},
我们可以使用匿名插槽的名字 也可以像下面那样 但是必须要有 —
template: `
<div>
<MBtn>登陆</MBtn>
<m-btn>注册</m-btn>
</div>`
}; let app = new Vue({
el: '#app', components: {
App
} })
</script> </body>
</html>
二 具名插槽
// 语法
Vue.component('MBtn', {
template: `
<button>
<slot name="login"></slot>
<slot name="register"></slot>
<slot name="submit"></slot>
</button> `
});
用
<MBtn>
<template slot="login">
<a href="#">登陆</a>
</template>
</MBtn>
具体使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body> <div id="app">
<App></App>
</div> <script>
Vue.component('MBtn', {
template: `
<button>
<slot name="login"></slot>
<slot name="register"></slot>
<slot name="submit"></slot>
</button> `
}); const App = {
template: ` <div>
<MBtn>
<template slot="login">
<a href="#">登陆</a>
</template>
</MBtn> <MBtn>
<template slot="register">
<a href="#">注册</a>
</template>
</MBtn>
<MBtn>
<template slot="submit">
<a href="#">提交</a>
</template>
</MBtn>
</div> `
}; let app = new Vue({
el: '#app',
components: {
App
}
})
</script>
</body>
</html>
三 作用域插槽
有时候让插槽内容能够访问子组件中才有的数据是很有用的。（来自官网）
首先我们有一段代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body> <div id="app">
<App></App>
</div> <script>
const todoList={
data(){
},
props:{
todos:Array,
defaultValue:[]
},
template:`
<ul>
<li v-for="item in todos" :key="item.id"> {{item.title}}
</li>
</ul>
`
}; const App={
data(){
return{
todoList:[
{
title:'大哥你好吗',
isComplate:true,
id:1
},
{
title:'小弟我还行啊',
isComplate:false,
id:2
},
{
title:'你在干什么',
isComplate:false,
id:3
},
{
title:'抽烟喝酒烫头',
isComplate:true,
id:4
}
] }
},
components:{
todoList
},
template:`
<todoList :todos="todoList"></todoList>
` }; let app = new Vue({
el:'#app',
components:{
App
}
})
</script>
</body>
</html>
效果如下：
好了 产品经理来 说 要给完成的打对勾
你肯定会说简单来看----加有一个 input就可以啦
const todoList={
data(){
},
props:{
todos:Array,
defaultValue:[]
},
template:`
<ul>
<li v-for="item in todos" :key="item.id">
<input type="checkbox" v-model="item.isComplate">
{{item.title}}
</li>
</ul>
`
};
但是我们的数据要在好几个组件上用 不能写死咯
具体步骤：
1 需要我们在子组件中放一个插槽
2.父组件中使用
子组件：放插槽
template:`
<ul>
<li v-for="item in todos" :key="item.id"> <slot :itemValue="item"></slot>
{{item.title}}
</li>
</ul>
`
父组件：使用
template:`
<todoList :todos="todoList"> <template v-slot="data">
<input type="checkbox" v-model="data.itemValue.isComplate">
</template>
</todoList>
`
总代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body> <div id="app">
<App></App>
</div> <script>
const todoList={
data(){
},
props:{
todos:Array,
defaultValue:[]
},
template:`
<ul>
<li v-for="item in todos" :key="item.id"> <slot :itemValue="item"></slot>
{{item.title}}
</li>
</ul>
`
}; const App={
data(){
return{
todoList:[
{
title:'大哥你好吗',
isComplate:true,
id:1
},
{
title:'小弟我还行啊',
isComplate:false,
id:2
},
{
title:'你在干什么',
isComplate:false,
id:3
},
{
title:'抽烟喝酒烫头',
isComplate:true,
id:4
}
] }
},
components:{
todoList
},
template:`
<todoList :todos="todoList">
<template v-slot="data"> # data自己定义
<input type="checkbox" v-model="data.itemValue.isComplate">
</template>
</todoList>
` }; let app = new Vue({
el:'#app',
components:{
App
}
})
</script>
</body>
</html>
vue学习（四）插槽的更多相关文章
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
- vue学习之插槽
插槽 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 个人理解:我感觉插槽就是父组件控制插槽 ...
- Vue学习笔记-插槽基本使用
为了让我们的组件更加具有扩展性,可以使用插槽 <div id="app"> <cpn> <span>返回</span> <in ...
- 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用
一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图. Store ...
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】（2022/8/30）
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- Vue学习四：v-if及v-show指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...
- vue 学习四 了解组件
1组件的注册 全局注册 import Vue from 'vue'; import com from './component1'; Vue.component("com_name" ...
- vue学习(四) v-on:事件绑定
//html <div id="app"> <input type="button" value="ok" v-bind: ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
随机推荐
- QQ企业通---登录模块设计--知识点
Rectangle 成员 存储一组整数,共四个,表示一个矩形的位置和大小.对于更高级的区域函数,请使用 Region 对象. Form与Control的区别? 窗体也是控件,继承Control类.可 ...
- quartz spring 实现动态定时任务
在实际项目应用中经常会用到定时任务,可以通过quartz和spring的简单配置即可完成,但如果要改变任务的执行时间.频率,废弃任务等就需要改变配置甚至代码需要重启服务器,这里介绍一下如何通过quar ...
- lunix下的redis安装
https://blog.csdn.net/qq_35992900/article/details/82950157
- 「SCOI2010」幸运数字
传送门 Luogu 解题思路 首先构造出所有的幸运数字. 然后考虑一个幸运数字会产生多少贡献. 对于一个数 \(x\),它在区间 \([l,r]\) 内的倍数的个数为 \(\lfloor \frac{ ...
- 安装lnmp1.5到最后出现Error: MySQL install failed的解决方法
解决方法: mv /usr/bin/cmake /usr/bin/cmake.backup wget http://www.cmake.org/files/v3.0/cmake-3.0.2.tar.g ...
- Hibernate all-delete-orphan[转]
博客分类: SSH 当关联双方存在父子关系,就可以在 set 处设定 cascade 为 all-delete-orphan 所谓父子关系,即指由父方控制子方的持久化圣明周期,子方对象必须和一个父 ...
- springboot中文官方文档
springboot中文官方文档 https://www.breakyizhan.com/springboot/3028.html spring框架 https://www.breakyizhan.c ...
- SciPy 插值
章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...
- POJ 2386 Lake Counting 八方向棋盘搜索
Lake Counting Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 53301 Accepted: 26062 D ...
- 编程题：求单链表倒数第k位的值（最后一位为倒数第0位）好未来
#!/usr/bin/env python class Node(object): def __init__(self,elem,next_=None): self.elem = elem self. ...