vue插槽slot

-具名插槽

---

子组件Demo.vue

<template> 
<div>
这是子组件Demo
       <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

---

引用子组件的页面

    <template>
    <div>
        <Demo >
            <!-- template 也可以是个普通元素,请看footer的slot // slot具名以后就可以插到对应的位置,否则规则跟非具名插槽一样 -->
              <template slot="header">
                <h1>页面标题</h1>
              </template>
              <p>A paragraph for the main content.</p>
              <p>And another one.</p>
              <div slot="footer">
                <mark>页面底部信息</mark>
              </div>
        </Demo>
    </div>
</template>
<script>
import API from '@/js/API.js'
import Demo from './Demo'
export default {
    data(){
        return{
        }
    },
components:{
    Demo
},
}
</script>

---

-作用域插槽

---

子组件Demo.vue

<template>
    <div>111
       <header>
            <slot name="header"></slot>
        </header>
        <main>
           <ul>
              <li v-for="todo in todos" v-bind:key="todo.id">
                <!-- 回传信息 -->
                <slot v-bind:todo="todo">
                  {{ todo.text }}
                </slot>
              </li>
            </ul>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
<script>
export default {
  data() {
    return {
      todos: [
        {
          text: "买机械键盘",
          isComplete: true
        },
        {
          text: "打羽毛球",
          isComplete: true
        },
        {
          text: "去教会做礼拜",
          isComplete: false
        }
      ]
    };
  }
};
</script>

---

引用子组件的页面

<template>
    <div :todos="todos">
        <Demo >
            <!-- template 也可以是个普通元素,请看footer的slot -->
              <template slot="header">
                <h1>页面标题</h1>
              </template>
            
              <!-- 用slot-scope接收子组件回传的信息 -->
                <template slot-scope="slotProps">
                    <span v-if="slotProps.todo.isComplete">✓</span> {{ slotProps.todo.text }}
                </template>
                
            
              <div slot="footer">
                <mark>页面底部信息</mark>
              </div>
        </Demo>
    </div>
</template>
<script>

import API from '@/js/API.js'
import Demo from './Demo'

export default {
    data(){
        return{

        }
    },
components:{
    Demo
},
}
</script>