vue3 基础-slot 插槽
前几篇的内容都是父子组件通过属性传值或者事件传值这样的. 本篇来学习父组件在调用子组件时, 如果想要给子组件传递特定的内容 (dom) , 则可通过 slot 这个设计来轻易实现哦.
例如现在有这样一个场景:
组件复用
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件复用</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `
<Son />
<Son />
`
})
app.component('Son', {
methods: {
handleClick () {
alert(666)
}
},
template: `
<div>
<input />
<div @click="handleClick">提交</div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
slot 初识
在父组件中, 调用了 2 次 Son 组件, 但咱希望第一次的是个 div, 第二次是个 button 的效果, 即可使用 slot 这种设计在父组件中调用子组件时给它 "增加内容":
<!DOCTYPE html>
<html lang="en">
<head>
<title>slot</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `
<son>
<div>提交</div>
</son>
<son>
<button>提交</button>
</son>
`
})
app.component('son', {
methods: {
handleClick () {
alert(666)
}
},
template: `
<div>
<input />
<span @click="handleClick">
<slot></slot>
</span>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
简单来梳理这个 slot 的使用流程则是:
- slot 的能实现父组件在调用子组件时, 直接往里面写内容 dom
- 子组件命名要小写, 父组件在调的时候以双标签的方式往里面添加 dom
- 子组件直接用 slot 这个双标签进行引用即可, 但其不能绑事件, 但可通过外包一层正常标签即可
slot 数据作用域
通常在组件通信中, 传递的数据是通过 data ( ) 来做驱动的, 这同样也带来了一个作用域的问题如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>slot 数据作用域</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { text: '提交' }
},
template: `
<son>
<div>{{text}}</div>
</son>
<son>
<button>{{text}}</button>
</son>
`
})
app.component('son', {
data () {
return { text: '点击'}
},
methods: {
handleClick () {
alert(666)
}
},
template: `
<div>
<input />
<span @click="handleClick">
<slot>{{text}}</slot>
</span>
<div>{{text}}</div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
父子组件都用到了 text 这个变量, 但其作用域是不同的, 我们可以看到在父组件这里, text 用的是父组件的数据.
template: `
<son>
<div>{{text}}</div>
</son>
<son>
<button>{{text}}</button>
</son>
`
})
而在子组件这里, slot 里面的 text 也是用父组件数据, 但 slot 外面的 text 则用的是子组件自己的数据.
template: `
<div>
<input />
<span @click="handleClick">
<slot>{{text}}</slot>
</span>
<div>{{text}}</div>
</div>
`
小结
最后来对本篇对 slot 的基本概念和使用做一个总结梳理如下:
- slot 的能实现父组件在调用子组件时, 直接往里面写内容 dom
- 子组件命名要小写, 父组件在调的时候以双标签的方式往里面添加 dom
- 子组件直接用 slot 这个双标签进行引用即可, 但其不能绑事件, 但可通过外包一层正常标签即可
- 父模板调用的数据属性, 用的是父模板数据属性, 子模板调用的数据属性, 用的是子莫不数据属性
vue3 基础-slot 插槽的更多相关文章
- VUE3 之 作用域插槽 - 这个系列的教程通俗易懂，适合新手
1. 概述 破窗效应告诉我们: 当一个建筑物窗户的玻璃完好无损时,很少有人想去破坏它,当有一个人破坏了一块窗户的玻璃,其他窗户的玻璃也很快会被人破坏. 同理,一个很干净的地方,人们不好意思去丢垃圾,但 ...
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- Vue slot插槽
插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...
- vue slot插槽的使用
slot插槽的使用场景 父组件向子组件传递dom时会用到插槽 作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定 注:想要修改父组件向子 ...
- Vue slot插槽内容分发
slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...
- vue中的slot插槽
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 1.navigation ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- slot插槽（学习笔记）
slot插槽(有默认值,也有名称)一般情况下通过名称进行匹配什么是插槽,有什么用?插槽相当于插入的一个东西,可以用来灵活的封装组件,比如说封装一个模态框对组件进行内容的定制,slot插槽,一对组件标签 ...
- Vue（14）slot插槽的使用
为什么使用slot slot(插槽) 在生活中很多地方都有插槽,电脑usb的插槽,插板当中的电源插槽 插槽的目的是为了让我们原来的设备具备更多的扩展性 比如电脑的USB我们可以插入U盘,手机,鼠标,键 ...
- Axios、Vue组件-生命周期、计算属性、Slot插槽、自定义事件、v-router、钩子函数
Axios:网络通信 <script> var vm =new vue({ el:"#app", data(){ return{ info:{ //返回的数据必须和js ...
随机推荐
- QQ/微信域名防红方法,打开网站跳转浏览器打开
简单通用QQ/微信跳转浏览器打开代码 使用方法: 将代码全部复制 粘贴到 网站根目录下index.php文件的顶端 注意:不要覆盖了 index.php里面的原代码,原代码保留(请尽快把样式以及图片本 ...
- Go实现动态开点线段树
1.线段树介绍 线段树是一种用于高效处理区间查询和区间更新的数据结构,当我们需要解决一个频繁更新区间值的问题的时候,就可以采用线段树的结构进行解决.线段树的核心思想是将区间分为多个子区间进行管理,越往 ...
- 花3分钟来了解一下Vue3中的插槽到底是什么玩意
前言 插槽看着是一个比较神秘的东西,特别是作用域插槽还能让我们在父组件里面直接访问子组件里面的数据,这让插槽变得更加神秘了.其实Vue3的插槽远比你想象的简单,这篇文章我们来揭开插槽的神秘面纱. 欧阳 ...
- LLM · RL | Plan4MC：使用有向无环图 high-level planning + 基于 RL 执行 low-level policy
文章标题:Skill Reinforcement Learning and Planning for Open-World Minecraft Tasks 最初发表时间:2023.03 arxiv:h ...
- Vue2框架-基础
1. vue简介 什么是vue? Vue是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,方便与第三方 ...
- 解决Dcat Admin laravel框架登录报错问题，(blocked:mixed-content)
前言 在使用 Dcat Admin 后台登录时,发生 error 报错:(blocked:mixed-content) xhr VM484:1,浏览器拦截 其实这是浏览器在 HTTPS 页面中尝试加载 ...
- ModuleNotFoundError: No module named '_lzma' when building python
前言 运行 python 报错:ModuleNotFoundError: No module named '_lzma' when building python 解决 sudo apt-get in ...
- python包管理工具pip使用手册
pip是什么? pip 是 Python 标准库管理器,也就是一个工具让你安装不同的类库来使用. 当你要安装某些类库时,都会使用 pip,那 pip 除了安装类库之外,还能做什么呢? 首先,我们进入 ...
- Golang 入门 : 创建第一个Go程序
创建第一个Go程序 新建一个 helloworld.go 文件,写入以下程序 package main import ( "fmt" ) // 一个函数声明 /* 一个main函数 ...
- pve节点频繁宕机问题排查
1.时间: 我是大概20220521日上午11:03分收到这个事情开始跟进: 再这之前一直是其他同事在处理,由于最近比较忙,没有安排的事情基本也都没有深入跟进,只是知道个大概. 2.问题现象: q ...