vue作用域插槽

最新推荐文章于 2025-03-13 20:48:01 发布

csdn_meng

最新推荐文章于 2025-03-13 20:48:01 发布

阅读量1.1w

点赞数

分类专栏： vue 文章标签： vue 作用域

本文链接：https://blog.csdn.net/csdn_meng/article/details/82150178

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>vue 作用域插槽</title>
    </head>

    <body>
        <div id="app">
            <!-- 
                这里的inner-books是my-list组件props中的innerBooks,
                outerBooks是vue的app实例中data的一个属性。
             -->
            <my-list :inner-books="outerBooks">
                <!--
                    这里的book引用了my-list中的name为book的slot
                -->
                <template slot="book" scope="props">
                    <!-- 
                        bookName是slot中的:book-name属性，
                        在HTML中-可以去掉后面的字母大写
                    -->
                    <li>{{props.bookName}}</li>
                </template>
            </my-list>
        </div>
        <script type="text/javascript" src="js/vue.min.js"></script>
        <script type='text/javascript'>
            Vue.component('my-list', {
                props: {
                    innerBooks: {
                        type: Array,
                        default: function() {
                            return [];
                        }
                    }
                },
                template: `
                    <ul>
                        <slot name='book'
                            v-for='book in innerBooks'
                            :book-name='book.name'
                        >

                        </slot>
                    </ul>
                `
            });
            var app = new Vue({
                el: '#app',
                data: {
                    outerBooks: [{
                        name: '1'
                    }, {
                        name: '2'
                    }, {
                        name: '3'
                    }]
                }
            })
        </script>
    </body>

</html>