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学习之 ...
随机推荐
- Vue 集成easyUI
原 Vue 集成easyUI https://blog.csdn.net/m0_37948170/article/details/84960320 参考vue官网用cli创建了Vue项目之后: n ...
- JS 一键复制插件应用 和 原生实现
一.目前来说复制功能 clipboard.js基本可以兼容所有浏览器,可以任意复制文本,官方地址 https://clipboardjs.com/ 1.进入官方网站下载 然后引入 <script ...
- English-Names
English-Names 1. 西方姓名的组成 2. 职业姓氏 3. 更多相关链接 中国的姓名,姓氏在前,名子在后.传统也有中间字(世代字).名子非常多.所谓百家姓,姓氏数量有限,约500个左右. ...
- android:showAsAction
在res/layout/menu文件夹下,放置login.xml: <menu xmlns:android="http://schemas.android.com/apk/res/an ...
- 「NOIP2010」引水入城
传送门 Luogu 解题思路 第一问很好做,只要总第一行的每一个点都跑一边dfs,判断最后一行是否有点标记不了即可. 考虑处理第二问. 其实这一问就是: 把第一行的点都看做是对最后一行一些点的覆盖,求 ...
- GCPC 2018
C.Coolest Ski Route 题意:n个点,m条边组成的有向图,求任意两点之间的最长路径 dfs记忆化搜索 #include<iostream> #include<stri ...
- 解决NLPIR汉语分词系统init failed问题
今天第一次使用NLPIR汉语分词系统. 遇到的问题: 当点击时, 出现以下界面 看了博客https://blog.csdn.net/yuyanyanyanyanyu/article/details/5 ...
- CodeForces - 869B The Eternal Immortality
题意:已知a,b,求的最后一位. 分析: 1.若b-a>=5,则尾数一定为0,因为连续5个数的尾数要么同时包括一个5和一个偶数,要么包括一个0. 2.若b-a<5,直接暴力求即可. #in ...
- docker安装mysql中注意事项
前言 怎么安装docker和拉mysql镜像不是本文的重点,在这里我主要讲我安装mysql容器的三个注意事项:启动容器, 修改密码,远程登录 run容器 docker run -di --name f ...
- springboot启动不能加载数据库驱动Failed to determine a suitable driver class
SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/G:/sharp/repo ...