vue-slot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .current{
            color:red;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- <test-a>这个是什么</test-a> -->
        <!-- 定义多个slot ---具名插槽 -->
        <test-b>
            <p slot='footer'>这是底部</p>
            <p>这是内容1</p>
            <p>这是内容2</p>
            <p slot='header'>这是顶部</p>
        </test-b>

        <!-- slot 只能在一个标签上写,
            如果要多个标签,可以用<template></template>包裹,这个标签不会再模板里呗渲染 -->
        <test-b>
            <template slot='footer'>
                    <p >这是底部1</p>
                    <p >这是底部2</p>
            </template>
            <!-- <p slot='footer'>这是底部</p> -->
            <p>这是内容1</p>
            <p>这是内容2</p>
            <p slot='header'>这是顶部</p>
        </test-b>

        <!--作用域插槽 -->
        <test-c :list='list'>
            <!-- 父组件对子组件的内容进行加工处理 -->
            <template slot-scope="slotProps">
                <strong v-if='slotProps.info.id===2' class="current">{{slotProps.info.name}}</strong>
                <span v-else>{{slotProps.info.name}}</span>
            </template>
        </test-c>

        <!-- v3.x v-solt -->
    </div>

</body>
<script>
//  Vue.component('test-a',{
//      template:`
//         <div>
//             <h3>Warning:</h3>
//             <slot>这个是slot</slot>
//         </div>
//      `
//  })   
//  var app = new Vue({
//      el:'#app',
//      data:{}
//  })


//具名插槽

Vue.component('test-b',{
     template:`
        <div>
                <header>
                    <slot name='header'></slot>
                </header>
                <main>
                    <slot></slot>
                </main>
                <footer>
                    <slot name='footer'></slot>
                </footer>
        </div>
     `
 })  

// var app = new Vue({
//      el:'#app',
//      data:{}
//  })

// 作用域插槽

Vue.component('test-c',{
    props:['list'],
    template:`
        <div>
            <ul>
                 <li :key='item.id' v-for='item in list'>
                    <slot :info='item'>{{item.name}}</slot>
                 </li>
            </ul>
        </div>
     `
 })  

var app = new Vue({
     el:'#app',
     data:{
         list:[
             {
                 id:1,
                 name:'app'
             },
             {
                 id:2,
                 name:'orange'
             },
             {
                 id:3,
                 name:'banana'
             }
         ]
     }
 })


</script>
</html>
posted @ 2020-06-12 15:43  无辜鱼粉  阅读(100)  评论(0编辑  收藏  举报