Vue 插槽slot

插槽 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>

总结：父组件替换插槽的标签，但是内容由子组件来提供