详解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 相关文章推荐
js实现温度计时间样式代码分享
Aug 21 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 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
PHP 作用域解析运算符(::)
2010/07/27 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
python如何实现int函数的方法示例
2018/02/19 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
鲜果饮品店创业计划书
2014/01/21 职场文书
体育比赛口号
2014/06/09 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
安全承诺书
2015/01/19 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
golang的文件创建及读写操作
2022/04/14 Golang