vue学习-组件插槽

和v-slot

layout2.vue

<template>
  <div>
    <div>这是头部div>
    <div>
      <h1>这是左边h1>
      <slot name="left">slot>
    div>
    <div>
      <h1>这是右边h1>
      <slot name="right">slot>
    div>
    <div>这是尾部div>
  div>
template>

<script>
export default {
  name: 'layout'
}
script>

App.vue:

<template>
  <div id="app">
   <layout>
   <template v-slot:left>
   <div class='left'>左边div>
   template>
   <template v-slot:right>
  <div class='right'>右边div>
   template>
   
   layout>
  div>
template>

<script>
import layout from './components/layout2.vue'

export default {
  name:'App',
  components:{
    layoutso
  }
}
script>

【注】 如果 组件标签 的 template 中没有包含一个 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
当slot组件有名字时，用v-soft指定是哪一个插槽。
结果：