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学习之 ...
随机推荐
- 【剑指Offer面试编程题】题目1369：字符串的排列--九度OJ
题目描述: 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 输入: 每个 ...
- JDBC--使用beanutils工具类操作JavaBean
1.在JavaEE中,Java类的属性通过getter,setter来定义: 2.可使用BeanUtils工具包来操作Java类的属性: --Beanutils是由Apache公司开发,能够方便对Be ...
- Day3-G - Task HDU4864
Today the company has m tasks to complete. The ith task need xi minutes to complete. Meanwhile, this ...
- jenkins构建python项目时，提示python不是内部或外部命令的解决办法
1.回到 Jenkins 首页,点击 “构建执行状态”或“Build Executor Status” ,右则会列出本机信息. 完美解决!!!
- UVALive 3231 网络流
题目要求给m个任务分配给n个机器,但最后任务量最多的那个机器的任务量尽量少,利用最大流,在最后的汇点那里设置关卡,二分结果,把机器到最终汇点的容量设置为该值,这样就达到题目条件,这样跑最大流 还能把m ...
- 十九 Listener
Listener 监听器 一 监听器内部原理:其实就是接口回调 需求:A在执行循环,当循环到5的时候,通知B 事先先把某一个对象传递给A ,当A执行到5的时候,通过这个对象来调用B中的方法 但是不是直 ...
- 常用keycode列表
KEYCODE列表 电话键 KEYCODE_CALL 拨号键 5 KEYCODE_ENDCALL 挂机键 6 KEYCODE_HOME 按键Home 3 KEYCODE_MENU 菜单键 82 K ...
- LINQ -- 匿名类型
匿名类型注意事项: 匿名类型只能和局部变量配合使用,不能用于成员. 由于匿名类型没有名字,我们必须使用var关键字作为变量类型. 不能设置匿名类型对象的属性.编译器为匿名类型穿件的属性是只读的. 除了 ...
- JavaScript 空白符（分隔符）
分隔符(空白符)就是各种不可见字符的集合,如空格(\u0020).水平制表符(\u0009).垂直制表符(\u000B).换页符(\u000C).不中断空白(\u00A0).字节序标记(\uFEFF) ...
- 使用 Doxygen 生成文档 （以FFmpeg 4.1.1 为例）
背景 在查找 ffmpeg 文档的时候,发现其文档是根据 Doxygen 生成的. 为了学习方便,这里以 生成 ffmpeg 4.1 文档 为例. 注:为了兼顾 arm 与 host ,本人选择了同时 ...