Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法

时间: 2018-11-08阅读: 3618标签: 组件

插槽

插槽,也就是slot,是组件的一块html模板,这块模板显示不现实、以及怎样显示由父组件来决定。 插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。

但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高,更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。


组件传参

通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用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()
}



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1289

Vue动态加载组件

使用import导入组件,可以获取到组件;使用import导入组件,直接将组件赋值给componet;使用require 导入组件,可以获取到组件;使用require 导入组件,直接将组件赋值给componet

React组件中的事件处理函数

在react中实现事件处理,有多种写法,那那种写法相对更优,更利于React的渲染性能呢?React组件中添加事件处理的几种方式?constructor函数中bind,使用箭头函数

React组件设计模式-Provider-Consumer

我们都知道,基于props做组件的跨层级数据传递是非常困难并且麻烦的,中间层组件要为了传递数据添加一些无用的props。而React自身早已提供了context API来解决这种问题,但是16.3.0之前官方都建议不要使用

vue 设计一个倒计时秒杀的组件

倒计时秒杀组件在电商网站中层出不穷 不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的

Vue 组件通信的8种方式

做了半年的公司系统,终于就在前天上线了。后期改BUG时间拖得太长了,出现的大部分BUG 是 前端 与后端 信息不对称导致的,逻辑性错误很不多,用户体验上稍微差点,毕竟第一次做这么大的系统(100w+),通过这次系统的开发

Vue组件化开发

学习组件化开发,首先掌握组件化的开发思想,组件的注册方式,组件间的数据交互方式,组件插槽的用法,vue调式工具的用法,组件的方式来实现业务逻辑功能。组件化开发思想,组件注册,组件调式,组件间的数据交互,组件插槽

VUE comfirm 弹出框实例

使用VUE做demo,需要用弹出框,在网上找了一下,找了一个能用的,把使用方法总结一下,备忘

前端组件设计原则

我在最近的工作中开始使用 Vue 进行开发,但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多,但是二者之间在很多基础概念、设计思路上是相通的

React 中 setState()详细解读

对于 setState() 相信伙伴们都用过,它是 React 官方推荐用来更新组件 state 的 API,但是对于 setState() 你真的了解吗?且待我慢慢详聊一番。语法1: setState(updater[, callback])

React组件设计:重新认识受控与非受控组件

React 官网中对非受控组件与受控组件作了如图中下划线的边界定义。一经推敲, 该定义是缺乏了些完整性和严谨性的, 比如针对非表单组件(弹框、轮播图)如何划分受控与非受控的边界?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!