好资源导航 » 文章资讯 » 详解Vue组件插槽的使用以及调用组件内的方法

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

2023-09-05 20:33:04 73

组件传参

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

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

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

slot插槽

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


我是对话框

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




//...可以是任何元素

slot-scope获取插槽作用域

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


我是对话框

{{message}}

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

ref调用组件内的方法

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

test(){
this.$refs.dialogA.func()
}

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐