Vue进阶(幺贰柒):Vue插槽

No Silver Bullet 2020-11-13 07:29:09
vue 进阶 插槽 贰柒


概述

插槽就是子组件中用slot标签定义的预留位置,可以设置name属性,也可以不设置name属性,设置name的叫具名插槽,不设置name的的叫不具名插槽,在父组件中使用子组件时候可以在使用子组件的标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。

插槽使用的关键在于:在父组件中使用子组件标签的时候可以往子组件内写入html代码。

使用步骤

  1. 子组件中定义插槽
  2. 父组件使用子组件时往插槽写入代码

何时使用插槽?

简单的举个栗子:有2个组件,父组件father,子组件son。

父组件 father

<template>
<div>
<h3>这是父组件</h3>
<son>实践slot</son>
</div>
</template>

子组件 son

<template>
<div>
<h4>这是子组件</h4>
<input type="text" placeholder="请输入">
</div>
</template>

一般我们的组件都会怎么写,但是这么写的话,会发现子组件中的实践slot是显示不出来的。如果需要让他显示出来,这时我们就可以用到插槽slot了。

如何使用插槽?

首先,子组件中我们要添加插槽slot,

<template>
<div>
<h4>这是子组件</h4>
<input type="text" placeholder="请输入">
<slot></slot>
</div>
</template>

这时,终于出现了slot。slot的位置就会出现父组件中实践slot这几个大字。
在这里插入图片描述
可以看到,这里面slot是没有名称的,顾名思义,这是插槽中的默认插槽。

然后在看看具名插槽,直接上代码。
父组件

<template>
<div>
<h3>这是父组件</h3>
<son><span>实践slot</span></son>
<son>
<template slot="myslot">
<div>
实践具名slot
</div>
</template>
</son>
</div>
</template>

子组件

<template>
<div>
<h4>这是子组件</h4>
<input type="text" placeholder="请输入">
<slot></slot>
<slot name="myslot"></slot>
</div>
</template>

可以看出,和默认插槽不同的是,在子组件中,我们给插槽一个name属性,这个就是插槽的名称,同时在父组件中,我们在需要将内容插入的地方标签上加了一个slot属性,他的值就是我们的slot 名称name。
在这里插入图片描述

接下来看下slot-scope。
slot-scope是作用域插槽。

官网中有一句特别强调的话:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。简单的说,就是父组件中不能直接用子组件中定义的data数据。而slot-scope的出现就是解决了这样的问题。

父组件

<template lang="">
<div>
<h3>这是父组件</h3>
<son>
<template slot="myslot" slot-scope="scope">
<ul>
<li v-for="item in scope.data">
{
{item}}
</li>
</ul>
</template>
</son>
</div>
</template>

子组件

<template>
<div>
<h4>这是子组件</h4>
<input type="text" placeholder="请输入">
<slot name="myslot" :data='list'></slot>
</div>
</template>
<script>
export default {
name:'Son',
data(){
return{
list:[
{name:"Tom",age:15},
{name:"Jim",age:25},
{name:"Tony",age:13}
]
}
}
}
</script>

在这里插入图片描述
其中,下方三个对象的值,我们本身是在子组件中定义的,按照官方文档中说的,本来父组件中是无法显示出来这些数据的,但是为什么现在显示出来了呢?这就要归功于我们强大的slot-scope了。

首先,在子组件中的插槽上有一句data=“list”,而在父组件中也有slot-scope=“scope”,slot-scope就是取data的值,slot-scope的值是自定义的,我们可以取任何名称,但是data的值传过来时是以对象形式传输的,所以在这scope.data才是list的值。

这样我们就可以在父组件中取到子组件的值,并且加以应用了。

  1. vue2.6.0开始,slotslot-scope已经被废弃,推荐使用v-slot;有关两者的用法区别,请移步博文《Vue进阶(幺贰捌):Vue插槽:slot、slot-scope与指令v-slot使用方法区别讲解》。
版权声明
本文为[No Silver Bullet]所创,转载请带上原文链接,感谢
https://shq5785.blog.csdn.net/article/details/106722520

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple