vue2插槽slot的使用

插槽的基本使用：
组件的子节点位置写的内容会被插入到子组件的<slot></slot>标签的子节点中，当组件的子节点没
有内容时，会默认使用<slot></slot>标签的子节点内容。
// 父组件
<!-- slot -->
<SlotDemo :url="website.url">
    {
   { website.title }} // 这里传了就用传的值 'imooc'
</SlotDemo>
data() {
    return {
      website: {
        url: 'http://imooc.com/',
        title: 'imooc'
      }
    }
  }

// 子组件
<template>
  <a :href="url">
    <slot>
      默认内容，即父组件没设置内容时，这里显示 // 传了这里内容就是 'imooc'
    </slot>
  </a>
</template>

<script>
export default {
  props: ['url'],
  data() {
    return {}
  }
}
</script>

// 作用域插槽：父组件使用子组件data中的数据作为子节点传入<slot></slot>。
// 父组件
<ScopedSlotDemo :url=&