vue learning advanced features - Slot slot

This chapter is about the slot slots, the [basic points of the use of slot], [slot of the slot named], [slot] to explain the scope of the slot.

 

• Slot (Slot) is a concept put forward by the Vue, as the name suggests, the slot for the decision to carry content, inserted into a specified position, so that the template block, has characteristics and greater modularity reusability.
• Slot significant not show how the display is controlled by the parent component, while slot on display are controlled by the subassembly where .

First, the basic use of slot

Subassembly:

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

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

</script>

Parent component:

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

Parent components which can be filled in the subassembly contents (or may not fill), as above, the contents of the span tag! If you do not fill default subcomponents slot content.

Second, the anonymous sockets

Subcomponents: the definition of slot label, then name to define a different 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>

Parent component: the sub-assembly which fill template, and then write v-slot, and then distinguish from different slot by name.

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

Third, the scope of slots

Scope slot usage scenarios: the structure, the external parent component (parent component) specified in the template subassembly circular list may be acquired subassembly defined data

Subassembly:

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

Parent component:

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