【VUE-学习01】插槽

最新推荐文章于 2024-04-24 08:36:32 发布

六碗铁biu_

最新推荐文章于 2024-04-24 08:36:32 发布

阅读量121

点赞数

分类专栏：【**Vue**】文章标签： vue

本文链接：https://blog.csdn.net/qq_30042269/article/details/99748039

版权

【**Vue**】专栏收录该内容

16 篇文章 0 订阅

订阅专栏

插槽

v-slot 定义插槽名

父组件在template中使用插槽

<!--
 插槽 
 20190819
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    
</head>
<body>
<div id='app'>
  <child>
    <template  v-slot:header>
        <h1>Header</h1>
    </template >
        
    <template  v-slot:footer>
        <h1>Footer</h1>
    </template >

  </child>
</div>


</body>
<script src="./js/vue.js"></script>
<script>
    Vue.component('child', {
        template:`<div> 
                   <slot name='header'></slot> 
                   hello
                   <slot name='footer'></slot>
                  </div>`
    })

    var app = new Vue({
        el: '#app',
    });
</script>
</html>

作用域插槽

<!--
 作用域插槽 列表式样由父组件传入，数据时子组件传递给父组件
 20190819
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    

</head>
<body>
<div id='app'>
    <child>
     <template v-slot:todo = "{props}">
        <h1>{{props}}</h1>
     </template>
    </child>    
</div>


</body>
<script src="./js/vue.js"></script>
<script>
    Vue.component('child', {
        data:function(){
            return {
                array :[1,2]
            }
        },
        template:`<div>  
            <ul>
                <slot v-for="item of array" name="todo" v-bind:props="item"></slot>
            </ul>
            </div>`
    })

    var app = new Vue({
        el: '#app',
    });
</script>
</html>