vue之插槽-slot

1.背景

2.slot简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="../js/vue.js"></script>
</head>
<body>
<h2>插槽slot简单使用</h2>
<pre>
1.定义:通俗的来说就是html中的变量,你可以理解为html替换,他要实现的功能非常类型之前我们使用jquery的 $("#id").html('要替换的内容')
2.官方的定义大家自己百度
    需求:
    1. 定义一个组件;
    2.组件内部的内容可以根据使用者替换
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
    <c-child1></c-child1>
    -------------------------
    <c-child1>
        <div>父类替换你的值</div>
    </c-child1>
</div>

<!--子组件模板1-->
<template id="child1id">
    <div>
        我是一个子组件
        <div>
            <slot>这是我的默认内容,使用者可以替换</slot>
        </div>
    </div>
</template>
<script>
    let app = new Vue({
        el: '#app',
        // 组件
        components: {
            'c-child1': {
                template: '#child1id',
            }
        }
    })
</script>
</body>
</html>

View Code

3.具名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="../js/vue.js"></script>
</head>
<body>
<h2>插槽slot-具名插槽</h2>
<pre>
1.当多个插槽时,我们替换的内容到底替换那个插槽呢,这时候我们就需要给插槽去一个名字
2.可以利用slot 元素的一个特殊的特性：name来定义具名插槽
    需求:
    1. 定义一个组件;
    2. 组件内3个插槽,分别为网页的头部、主体、脚部
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
    <c-child1>
        <div slot="header">填充头部</div>
        <div slot="body">填充主体</div>
        <div slot="footer">填充脚部</div>
    </c-child1>

</div>

<!--子组件模板1-->
<template id="child1id">
    <div>
        <div>
            <slot name="header">头部</slot>
            <slot name="body">主体</slot>
            <slot name="footer">脚部</slot>
        </div>
    </div>
</template>
<script>
    let app = new Vue({
        el: '#app',
        // 组件
        components: {
            'c-child1': {
                template: '#child1id',
            }
        }
    })
</script>
</body>
</html>

View Code

4.父组件控制插槽中的数据显示方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="../js/vue.js"></script>
</head>
<body>
<h2>插槽-实现子组件提供数据-父组件提供展示样式</h2>
<pre>
    需求:
    1. 提供一个子组件含插槽和一组数据;
    2. 父组件控制数据在插槽中的显示方式;
    备注:
    实际生产中子组件获取到数据后,可能要在不同环境的父组件中做不同的展示
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
    展示方式一:
    <c-child1>
        <!--  slotProps2 可以自定义-->
        <template slot-scope="slotProps2">
            <ul>
                <!-- slotProps2.data 取出插槽绑定在上面的data-->
                <li v-for="item in slotProps2.data">{{item}}</li>
            </ul>
        </template>
    </c-child1>
    -----------------------
    <br>
    展示方式二:
    <c-child1>
        <template slot-scope="slotProps2">
            <ul>
                <li v-for="(item,index) in slotProps2.data">{{index+1}}-{{item}}</li>
            </ul>
        </template>
    </c-child1>
</div>

<!--子组件模板1-->
<template id="child1id">
    <div>
        <!-- 这里的data不乱取名字,只能是data-->
        <slot :data="orderList"></slot>
    </div>
</template>
<script>
    let app = new Vue({
        el: '#app',
        // 组件
        components: {
            'c-child1': {
                template: '#child1id',
                data() {
                    return {
                        orderList: ['书籍', '水果', '键盘', '水杯']
                    }
                }
            }
        }
    })
</script>
</body>
</html>

View Code

完美!

posted @ 2020-10-21 11:15 李东平|一线码农阅读(127) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

姿势帝

vue之插槽-slot

1.背景

2.slot简单使用

3.具名插槽

4.父组件控制插槽中的数据显示方式

我的标签

随笔分类

视屏课程

阅读排行榜

评论排行榜