【Vue】组件 - 插槽的基本用法

微信订阅号：Rabbit_svip

若是以为Vue的组件已经很是方便的话，那么插槽 <slot> 会让组件超神。html

插槽的主要做用是帮助咱们更好的在其余组件中进行布局。当想要便携可重用的控件时尤其重要。微信

先上代码，经过代码能很直观的知道插槽到底有什么做用了。app

<!-- HTML代码 -->

<div id="app">
  <Quote>
    <h2>{{quoteTitle}}</h2>
    <p>A wonderful slot</p>
  </Quote>
</div>

/* JS代码 */

var Quote = {
  template: `
    <div>
      <slot></slot>
    </div>
  `}

new Vue({
  el: '#app',
  data: {
    quoteTitle: 'This is Quote'
  },
  components: {
    Quote
  }
})

微信订阅号：Rabbit_svip

经过父组件调用子组件，而后在调用的过程当中，在子组件内部放入内容，好比上面例子中插入了一些原生的html标签。布局

在子组件中，用 <slot> 标签接收。code

最后中页面中输出的内容如上图所示，在Elements里，也能够看到html的布局。component

以上就是在组件中插槽的最基本用法。htm