详解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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
JavaScript的==运算详解
Jul 20 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 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的网址
2006/11/25 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
Jquery cookie操作代码
2010/03/14 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
Python实现自动登录百度空间的方法
2017/06/10 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
经典c++面试题二
2015/08/14 面试题
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
制药工程专业个人求职自荐信
2014/01/25 职场文书
教师现实表现材料
2014/02/14 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
市级三好生竞选稿
2015/11/21 职场文书
《搭石》教学反思
2016/02/18 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers