详解Vue组件插槽的使用以及调用组件内的方法


Posted in Javascript onNovember 13, 2018

组件传参

通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数

export default {
 props: ['options'],
 data(){
 return {}
 }
}

但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的
如果我只是显示文字的话, 我可以简单的将字符串传进去props: ['message']
但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽

slot 插槽

slot的使用就像它的名字一样, 在组件内定义一块空间, 取名为slotA

<div class="dialog">
 我是对话框
 <slot name="slotA"></slot>
</div>

在组件外, 我们可以往插槽里填入任何元素, dialog-a为组件的名称

<dialog-a :options="hello">
 <template slot="slotA">
 <button>按钮</button>
 // ... 可以是任何元素
 </template>
</dialog-a>

slot-scope 获取插槽作用域

前面讲的只是实现往组件内加入元素, 但是并没有和组件的数据有任何的交互
slot-scope的作用就是把组件内的码农之家数据带出来

<div class="dialog">
 我是对话框<br>
 {{message}}
 <slot name="slotA" :message="message"></slot>
</div>

在组件外就可以得到其中的message

<dialog-a :options="hello">
 <template slot="slotA" slot-scope="scope">
 <button>{{scope.message}}</button>
 </template>
</dialog-a>

ref 调用组件内的方法

使用this.$refs找到组件后, 就可以调用其中methods中的方法

<dialog-a ref="dialogA"></dialog-a>
test(){
 this.$refs.dialogA.func()
}
Javascript 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
javascript时区函数介绍
Sep 14 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
vue计算属性及使用详解
Apr 02 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
Vue实现一个无限加载列表功能
Nov 13 #Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 #Javascript
vue中slot(插槽)的介绍与使用
Nov 12 #Javascript
vuex的module模块用法示例
Nov 12 #Javascript
React手稿之 React-Saga的详解
Nov 12 #Javascript
基于游标的分页接口实现代码示例
Nov 12 #Javascript
React Hooks的深入理解与使用
Nov 12 #Javascript
You might like
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
Function.prototype.bind用法示例
2013/09/16 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
python 获取网页编码方式实现代码
2017/03/11 Python
Python实现简单http服务器
2018/04/12 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
python读取Excel表格文件的方法
2019/09/02 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Python join()函数原理及使用方法
2020/11/14 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
培训楼经理岗位责任制
2014/02/10 职场文书
房屋出售协议书
2014/04/10 职场文书
党员活动日总结
2014/05/05 职场文书
心得体会的写法
2014/09/05 职场文书
三严三实学习心得体会
2014/10/13 职场文书
节水倡议书
2015/01/19 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis