博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue组件-使用插槽分发内容(slot)
阅读量:4978 次
发布时间:2019-06-12

本文共 1304 字,大约阅读时间需要 4 分钟。

slot--使用插槽分发内容(位置、槽口;作用: 占个位置)

官网API: 

使用组件时,有时子组件不知道会收到什么内容,这是由父组件决定的。

一、单个插槽

1.my-component 组件:

我是子组件的标题

只有在没有要分发的内容时才会显示。
2.父组件:

我是父组件的标题

这是一些初始内容

这是更多的初始内容

3.渲染结果:

我是父组件的标题

我是子组件的标题

这是一些初始内容

这是更多的初始内容

二、具名插槽

slot根据不同的name名称分发内容,多个插槽可以有不同的名字。

仍然可以有匿名的默认插槽,为了找不到匹配的内容片段使用,如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。

1.my-component 组件:
2.父组件:

这里可能是一个页面标题

主要内容的一个段落。

另一个主要段落。

这里有一些联系信息

3.渲染结果:

这里可能是一个页面标题

主要内容的一个段落。

另一个主要段落。

这里有一些联系信息

三、作用域插槽

作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。

1.子组件:
2.父组件:
3.渲染结果:
hello from parent
hello from child

 

转载于:https://www.cnblogs.com/ccyinghua/p/7878187.html

你可能感兴趣的文章
求输入成绩的平均分
查看>>
php PDO (转载)
查看>>
wordpress自动截取文章摘要代码
查看>>
[置顶] 一名优秀的程序设计师是如何管理知识的?
查看>>
highcharts 图表实例
查看>>
highcharts曲线图
查看>>
extjs动态改变样式
查看>>
宏定义
查看>>
笔记:git基本操作
查看>>
生成php所需要的APNS Service pem证书的步骤
查看>>
JavaWeb之JSON
查看>>
HOT SUMMER 每天都是不一样,积极的去感受生活 C#关闭IE相应的窗口 .
查看>>
optionMenu-普通菜单使用
查看>>
【MemSQL Start[c]UP 3.0 - Round 1 C】 Pie Rules
查看>>
Ognl中“%”、“#”、“$”详解
查看>>
我对应用软件——美团的看法
查看>>
struts2.x + Tiles2.x读取多个xml 配置文件
查看>>
表单校验之datatype
查看>>
python第六篇文件处理类型
查看>>
ubuntu16系统磁盘空间/dev/vda1占用满的问题
查看>>