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

微信订阅号：Rabbit_svip

如果觉得Vue的组件已经非常方便的话，那么插槽 <slot> 会让组件超神。

插槽的主要作用是帮助我们更好的在其他组件中进行布局。当想要便携可重用的控件时尤为重要。

---

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

<!-- 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> 标签接收。

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

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