(编辑:jimmy 日期: 2024/9/27 浏览:2)
本文题材来自:https://cn.vuejs.org/v2/guide/components.html#%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD%E5%88%86%E5%8F%91%E5%86%85%E5%AE%B9
<slot></slot>标签,简单来说就是占位符,它会帮你占好位置,等你需要的时候直接将html传入,它会帮你显示出来。
也有人说:props可以将数据从父组件传入子组件,slot可以将html从父组件传入子组件。那么如何实现呢?
单个插槽:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript" src="/UploadFiles/2021-04-02/vue.min.js">组件中的模板中写入slot标签,在父级调用子组件的时候传入html即可。
具名插槽:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript" src="/UploadFiles/2021-04-02/vue.min.js">具名插槽,顾名思义当有多个slot标签时,你需要给他们起个自己的名字,在父组件调用时需要slot="内部的对应名字",当存在没有命名的slot标签时,父级组件传入的默认html代码将全部输出在无名的slot标签中。
作用域插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript" src="/UploadFiles/2021-04-02/vue.min.js">作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。
其实就是相当于,在父组件中可以获取到子组件传递出来的props对象,从而渲染到父组件上。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
最新资源
- 陈慧娴.2018-Priscilla-Ism演唱会3CD(2024环球红
- 郑秀文.1999-我应该得到(国)【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+