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学习之 ...
随机推荐
- PHP 获取一周的时间
$date = array( 'Monday' => array(date('Y-m-d H:i:s',strtotime("Monday")),date('Y-m-d H: ...
- 一、什么是Velocity及简单示例
1.velocity简介: velocity是一个java模板引擎技术,任何人可以使用这种简单而又强有力的模板语言去获取java对象. 在使用Velocity进行web开发时,web开发人员和j ...
- 使用IDEA，Eclispe搭建Spring Boot项目
如何创建一个Spring Boot项目?这里使用maven来进行依赖管理,根据常用的IDE,可以使用IDEA.Eclipse.或者访问官方网站搭建. 项目搭建环境准备 JDK:1.8 MAVEN:3. ...
- struts2--action请求与Action类
1.action:代表一个sturts2的请求: 2.Action类:能够处理Struts2请求的类: --属性名必须遵守与JavaBean属性名相同的命名规则: --属性的类型可以使任意类型.从字符 ...
- java小项目之：抽奖系统！java初学者必备（内附源码）
[Java]Java摇奖源码,Java抽奖源码,Java随机抽奖源码 任务描述 本次任务要求为某商场开发一套幸运抽奖系统,客户必须首先注册成为该商场会员,会员登录成功后,就可以参加抽奖活动了.注册 用 ...
- 如何借助 Python 俘获女孩子芳心？
责编 | 刘静 天气降温,感情却升温了? 上午刚到公司,就收到小Q发来的灵魂拷问: “Q仔!要不然下午请个假!我带你去精神科看看!?”我实在忍不了,脱口而出. 话音未落,前排的运营小花回头看向 ...
- Linux下如何拷贝整个目录下的所有文件
分类: Linux使用2014-01-14 13:38 1449人阅读 评论(0) 收藏 举报 如何在Linux下拷贝一个目录呢?这好像是再如意不过的问题了.比如要把/home/usera拷贝到/mn ...
- SVG格式文件
SVG可以算是目前最最火热的图像文件格式了,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形.它是基于XML(Extensible Markup Language ...
- QQ企业通---DllImport
1.DllImport 是什么? DllImport是System.Runtime.InteropServices命名空间下的一个属性类,其功能是提供从非托管DLL(托管/非托管是微软的.net fr ...
- JS动态判断设备类型为PC或者移动端，然后根据设备加载相应的代码
这里是通过JS判断设备之后加载相应的网站,如果是移动端加载m开头的网站域名,如果是PC端就加载 www.开头的正式域名 <script> (function () { var url = ...