插槽

一、插槽作用

1.组件的插槽也是为了让我们封装的组件更加具有扩展性。
2.让使用者可以决定组件内部的一些内容到底展示什么。
3.最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。

二、使用插槽

1.插槽的基本使用

//父组件
<div id="app">
  <cpn><button>按钮</button></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
//子组件
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件</p>
    <slot></slot>
  </div>
</template>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

此时，只有第一个父标签或会出现按钮

2.插槽的默认值 button

<div id="app">
  <cpn></cpn>
  <cpn><span>哈哈哈</span></cpn>
  <cpn><i>呵呵呵</i></cpn>
</div>


<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件</p>
    <slot><button>按钮</button></slot>
    <!--<button>按钮</button>-->
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

此时，只有第一个父标签有按钮，有指令时，显示指令

3.如果有多个指令, 同时放入到组件进行替换时, 一起作为替换元素。

具名插槽

给slot元素一个name属性——

例：

<div id="app">
  <cpn><span slot="center">标题</span></cpn>
  <cpn><button slot="left">返回</button></cpn>
</div>

<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>