如何理解vue.js里组件中的slot和scoped slot?

为什么80%的码农都做不了架构师？>>>   

slot，插槽的意思，顾名思义，就是一个小空间，我们可以往里面放一些东西。而在vue.js里的组件中，slot又起到什么作用呢？slot可被用在

• 一般组件（button, Modal, Card, Dropdown, Tabs etc ）;
• 结构布局组件（ App, Header, Navbar, Footer ）；
• 递归组件（Tree,Menu）;

比如下面这个例子：

//child-component
<template>
  <div>
    <p>I'm the child component!</p>
    <!-- Content from the parent gets rendered here. -->
    <slot></slot>
  </div>
</template>

<template>
  <div>
    <child-component>
      <p>I'm injected content from the parent!</p>
      <p>I can still bind to data in the parent's scope, like this! {{myVariable}}</p>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },

  data() {
    return {
      myVariable: `I'm just a lonely old variable.`
    }
  }
}
</script>

未完待续。。。

转载于:https://my.oschina.net/hyzccc/blog/1808473