Vue 插槽传值应用

最新推荐文章于 2024-05-29 17:42:35 发布

java庞

最新推荐文章于 2024-05-29 17:42:35 发布

阅读量207

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44899752/article/details/125442132

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
       
      <my-comp :students="students">
        <template slot="header">
            <h1>logo</h1>
        </template>
        <template slot="cntent" slot-scope="props">
            <table border="1" style="width: 200px;">
                <tr>
                    <td>{{props.studentinfo.id}}</td>
                    <td>{{props.studentinfo.name}}</td>
                    <td>{{props.studentinfo.age}}</td>
                </tr>
            </table>
        </template>
        <template slot="footer">
            <h1>版权信息</h1>
        </template>
    </my-comp>
    </div>
    <template id="mycomp">
        <div>
           <slot name="header"></slot>
           <slot name="cntent" v-for="student in students" :studentinfo="student"></slot>
           <slot name="footer"></slot>
            
        </div>
    </template>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            students:[
                {id:1,name:"丽丽",age:20},
                {id:2,name:"小丽丽",age:21},
                {id:3,name:"陈丽丽",age:20}
            ]
        },
        components:{
            "my-comp":{
                props:["students"],
                template:"#mycomp"
            }
        }
    })
</script>
</html>