9. Vue.js slot

最新推荐文章于 2023-12-22 19:54:05 发布

AlvinUnity

最新推荐文章于 2023-12-22 19:54:05 发布

阅读量108

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/Alvin199765/article/details/108411791

版权

Vue.js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

slot

在Vue中使用<slot>元素作为承载分发内容的出口，称之为插槽，可以应用在组合组件的场景中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  导入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script>
        var vm;
        window.onload = function () {
            Vue.component("todo",
                {
                template:'<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-list"></slot>\
                        </ul>\
                    </div>'
            });



            Vue.component("todo-title",{
                props:['title'],
                template:'<p>{{title}}</p>'
            });

            Vue.component("todo-list",{
                props:['todoItem'],
                template:'<li>{{todoItem}}</li>'
            });

            vm = new Vue({
                el: "#app",
                data:{
                    todoTitle:'待办列表',
                    todoList:['Java','Linux','Python']
                }
            })
        }
    </script>
</head>

<body>
<!--view层 模板-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="todoTitle"></todo-title>
        <!--
            todoItem -> todo-item
            因为HTML中的attribute名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符
            这就意味着在使用DOM模板的时候，需要将props的驼峰命名法，在html中转换成短横线命名法
        -->
        <todo-list slot="todo-list" v-for="item in todoList" :todo-item="item"></todo-list>
    </todo>
</div>
</body>
</html>

AlvinUnity

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9. Vue.js slot

slot在Vue中使用<slot>元素作为承载分发内容的出口，称之为插槽，可以应用在组合组件的场景中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script src="https://cdn.jsdeli
复制链接

扫一扫