vue学习高级特性--插槽slot

本章主要是讲slot插槽部分，分【slot的基本使用】、【slot的具名插槽】、【slot的作用域插槽】讲解。

• 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
• 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。

一、slot的基本使用

子组件：

<template>
  <div>
    <a :href="url">
      <slot>
        默认显示，父组件没有内容时候显示
      </slot>
    </a>
  </div>
</template>

<script>
export default {
  // 子组件
  name: 'childSlot1',
  props:['url']
}

</script>

父组件：

<template>
  <div>
    <child-slot1 :url="url">
      <span>我是父组件传递进来的内容</span>
    </child-slot1>
  </div>
</template>

<script>
import childSlot1 from './childSlot1'
export default {
  // 父组件
  name: 'Index',
  data(){
    return {
      url: 'https://www.baidu.com'
    }
  },
  components: {
    childSlot1
  }
}
</script>

父组件中可以在子组件里面填入内容(也可以不填)，如上面span标签的内容！如果不填默认为子组件slot的内容。

二、具名插槽

子组件：定义slot标签，然后用name去定义不同的名字。

<template>
  <div>
    <a :href="url">
      <div>
        <slot name="header">
          头部导航
        </slot>
      </div>
      <div>
        <slot name="footer">
          尾部导航
        </slot>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  // 子组件
  name: 'childSlot1',
  props:['url']
}
</script>

父组件：在子组件里面填写template，然后写上v-slot,然后用名字区分来源于不同的插槽。

<template>
  <div>
    <child-slot1 :url="url">
      <template v-slot:header>
        <span>父组件改变头部导航</span>
      </template>
      <template v-slot:footer>
        <span>父组件改变尾部导航</span>
      </template>
    </child-slot1>
  </div>
</template>

<script>
import childSlot1 from './childSlot1'
export default {
  // 父组件
  name: 'Index',
  data(){
    return {
      url: 'http://www.imooc.com'
    }
  },
  components: {
    childSlot1
  }
}
</script>

三、作用域插槽

作用域插槽 使用场景： 由外部（父组件）指定子组件 template 中循环列表的结构，父组件可以获取子组件定义好的数据

子组件：

<template>
  <div>
    <a :href="url">
      <slot :slotData="website">
        {{website.subTitle}}
      </slot>
    </a>
  </div>
</template>

<script>
export default {
  // 子组件
  name: 'childSlot1',
  props:['url'],
  data () {
    return {
      website: {
        url: 'https://www.imooc.com',
        title: '慕课网',
        subTitle: '程序员的最爱学习网站'
      }
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child-slot1 :url="url">
      <!-- slotProps的名字可以随便取 -->
      <template v-slot="slotProps">
        {{slotProps.slotData.title}}
      </template>
    </child-slot1>
  </div>
</template>

<script>
import childSlot1 from './childSlot1'
export default {
  // 父组件
  name: 'Index',
  data(){
    return {
      url: 'http://www.baidu.com'
    }
  },
  components: {
    childSlot1
  }
}
</script>

扫描二维码关注公众号，回复： 10105171 查看本文章