插槽 slot

slot的基本使用

• 在真正學習插槽之前，我們需要先了解一個概念：編譯作用域
• 官方給出了一條準則：父元件模闆的所有東西都會在父級作用域内編譯；子元件模闆的所有東西都會在子級作用域内編譯。
• 在子元件中，使用特殊的元素

  <slot>

  就可以為子元件開啟一個插槽。
• 該插槽插入什麼内容取決于父元件如何使用。

<div id='app'>
    <cpn><button>按鈕</button></cpn>
    <cpn><span>哈哈哈</span></cpn>
    <cpn>
        <i>hehe</i>
        <div>lala</div>
        <p>xixi</p>
    </cpn>
    <cpn></cpn>
</div>

<template id='cpn'>
    <div>
        <h2>我是元件</h2>
        <p>我是元件，哈哈哈</p>
        <slot></slot>
        <!-- <button>按鈕</button> -->
    </div>
</template>
<script>

const app = new Vue({
    el:'#app',
    data:{
  },
  components:{
      cpn:{
          template:'#cpn'
      }
  }
})

</script>
           

1. 插槽的基本使用

   <solt></solt>

2. 插槽的預設值 

   <slot>button</solt>

3. 如果有多個預設值，同時放入到元件進行替換時，作為替換元素

具名插槽slot

-當子元件的功能複雜時，子元件的插槽可能并非是一個。

-比如我們封裝一個導航欄的子元件，可能就需要三個插槽，分别-代表左邊、中間、右邊。

-那麼，外面在給插槽插入内容時，如何區分插入的是哪一個呢？

-這個時候，我們就需要給插槽起一個名字

-如何使用具名插槽呢？

-非常簡單，隻要給slot元素一個name屬性即可

-

<slot name='myslot'></slot>

<div id='app'>
    <cpn><button  slot="left">anniu</button></cpn>
</div>

<template id='cpn'>
    <div>
        <slot name="left">左邊</slot>
        <slot name="center">中間</slot>
        <slot name="right">右邊</slot>
        <!-- <button>按鈕</button> -->
    </div>
</template>
<script>
const app = new Vue({
    el:'#app',
    data:{
  },
  components:{
      cpn:{
          template:'#cpn'
      }
  }
})
</script>
           

 總結：父元件替換插槽的标簽，但是内容由子元件來提供