• 94694

    文章

  • 787

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

Vue 作用域插槽

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>

使用场景:复用子组件的slot,又可以使slot的内容不一样。

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
    </head>

    <body>
        <div id="app">
            <my-component :books="books">
                <template slot="book" slot-scope="props">
                    <li>{{props.bookName}}</li>
                </template>
            </my-component>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            Vue.component('my-component', {
                template: ` <ul> <slot name="book" v-for="book in books" :book-name="book.name"><slot> </ul>  `,                //前端全栈学习交流圈:866109386
                props: {//面向1-3年前端开发人员
                    books: {//帮助突破技术,提升思维
                        type: Array,
                        default: function() {
                            return [];
                        }
                    }
                }
            });
            new Vue({
                el: "#app",
                data: {
                    books: [{
                        name: 'css'
                    }, {
                        name: 'js'
                    }, {
                        name: 'html'
                    }, ]
                }
            })
        </script>
    </body>

</html>

695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

欢迎来到梁钟霖个人博客网站。本个人博客网站提供最新的站长新闻,各种互联网资讯。 还提供个人博客模板,最新最全的java教程,java面试题。在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿大家一起进步!

转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客