详解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获取url中指定参数值的示例代码
Dec 14 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
javascript自定义的addClass()方法
May 28 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
Vue实现导航栏菜单
Aug 19 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
php实现异步数据调用的方法
2015/12/24 PHP
php中使用websocket详解
2016/09/23 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
php精度计算的问题解析
2019/06/21 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
python安装scipy的方法步骤
2019/06/26 Python
Python函数基本使用原理详解
2020/03/19 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python包和模块的分发详细介绍
2020/06/19 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
利用python绘制正态分布曲线
2021/01/04 Python
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
支教自我鉴定
2014/01/18 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
《石榴》教学反思
2014/03/02 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
房产遗嘱范本
2015/08/06 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android