插槽 slot 具名插槽 作用域插槽

插槽 slot

组件的插槽让封装好的组件更具扩展性

让使用则可以决定组件内部的一些内容到底展示什么

例如： 每个页面都有导航栏，则封装成一个插件，可以在多个页面中复用

抽取共有的

可以为插槽设置默认值

slot 在组件中开辟一块可替换的位置，当父组件使用组件标签时候，将标签里面的标签替换掉组件中的slot中的标签

<div id="app">
  <cpn> <button>anjiu</button></cpn>
  <cpn>
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </cpn>
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是组件哈哈哈哈</p>
    <slot> <p>hahhaudhsu</p></slot>
  </div>
</template>
<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于要挂载要管理的元素
    data: {
      message: "你好啊"
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>

具名插槽

给插槽设置名称，通过名称替换更改

<div id="app">
  <cpn><span slot="center">标题</span> </cpn>

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

</template>

编译作用域

变量在使用时都会在当前模板里面查找

父组件模板的所有东西都会在父级作用域内编译，子模板的所有东西都会在自己作用域内编译

在中使用的变量，依然属于父级作用域。

作用域插槽

父组件替换插槽的标签，但内容由子组件提供

1、子组件中通过绑定子组件中的数据

 <slot :data="planguages">
      <ul>
        <li v-for="item in planguages">{{item}}</li>
      </ul>
    </slot>

2、在父组件中通过slot-scope 获取子组件的数据

<div id="app">
  <cpn>
    <!--获取子组件的数据-->
    <template slot-scope="slot">
      <span v-for="item in slot.data"> {{item}}-</span>
      <br>
      <span > {{slot.data.join('-')}}</span>
    </template>

  </cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <slot :data="planguages">
      <ul>
        <li v-for="item in planguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

<script src="../../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于要挂载要管理的元素
    data: {
      message: "你好啊"
    },
    components: {
      cpn: {
        template: '#cpn',
        data(){
          return{
            planguages: ['java','js','c++']
          }
        }
      }
    }
  })
</script>