Vue入门 Demo19 Vue中的作用域插槽

最新推荐文章于 2022-05-18 21:57:35 发布

城南花已开呀

最新推荐文章于 2022-05-18 21:57:35 发布

阅读量163

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_36778310/article/details/104721552

版权

Vue 专栏收录该内容

20 篇文章

订阅专栏

Vue入门 Demo19 Vue中的作用域插槽

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>Vue中的作用域插槽</title> 
        <script src="./vue.js"></script>
        
    </head> 
    <body>
        <div id="app">  
            <child>
                <!-- 作用域插槽必须是template开头结尾的 -->
                <template slot-scope="props">
                    <li>{{props.item}}</li>
                </template>
            </child>
        </div>
        <script>
           
            Vue.component('child',{
                data: function(){
                    return {
                        list: [1, 2, 3, 4],
                    }
                },
               template: '<div> <ul> <slot v-for="item of list" :item=item></slot> </ul> </div>'                        
                             
            })
            
            var vm = new Vue({
                el: "#app",
                methods: {
                    
                }
            })
        </script> 
    </body> 
</html>