Vue 作用域插槽

最新推荐文章于 2023-01-31 17:52:09 发布

weixin_34332905

最新推荐文章于 2023-01-31 17:52:09 发布

阅读量129

点赞数

文章标签：前端 python javascript ViewUI

原文链接：https://my.oschina.net/u/3970421/blog/2870250

版权

2019独角兽企业重金招聘Python工程师标准>>>

使用场景：复用子组件的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>

转载于:https://my.oschina.net/u/3970421/blog/2870250