详解Vue组件插槽的使用以及调用组件内的方法
2018-12-11 08:02
1291 查看
组件传参
通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用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官方推荐AJAX组件axios.js使用方法详解与API
- vue拖拽组件使用方法详解
- vue组件tabbar使用方法详解
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
- vue 使用ref 让父组件调用子组件的方法
- vue拖拽组件使用方法详解
- vue全局组件与局部组件使用方法详解
- vue 使用ref 让父组件调用子组件的方法
- Vue.js路由组件vue-router使用方法详解
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
- 详解vue slot插槽的使用方法
- vue中mouted与methods中方法互相调用,以及vue中使用setInterval调用methods中方法
- 详解iOS App中UISwitch开关组件的基本创建及使用方法
- 安卓四大组件之二#1-Service的创建,生命周期以及动态调用Service里的方法 推荐
- 如何制作U盘系统盘以及使用U盘安装操作系统的方法(图文详解)
- 通过npm引用的vue组件使用详解
- android学习笔记---53_采用网页设计软件界面,以及使用android系统内置的浏览器,利用js调用java方法
- android使用include调用内部组件的方法
- 详解Android应用中使用TabHost组件进行布局的基本方法