Vue 做用域插槽

時間 2019-11-13

標籤 vue 插槽简体版

原文原文鏈接

使用場景：複用子組件的slot，又可使slot的內容不同。javascript

<!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>

相關標籤/搜索