详解Vue组件插槽的使用以及调用组件内的方法
2019/6/26 23:21:48
本文主要是介绍详解Vue组件插槽的使用以及调用组件内的方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
组件传参
通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用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() }
这篇关于详解Vue组件插槽的使用以及调用组件内的方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南