vue.js插槽slot的相关使用

最新推荐文章于 2024-03-15 23:16:08 发布

cbl1369732

最新推荐文章于 2024-03-15 23:16:08 发布

阅读量207

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/cbl1369732/article/details/104141412

版权

vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.插槽slot的基本使用，插槽的使用目的是预留一个地方给其他人有自己的实现方式

如果你想在模板中有一部分需要预留出来就使用slot标签，如果你想写自己的实现代码你就在子组件的标签中写自己的实现内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id="app">
        <mycbl><div>我的实现代码</div></mycbl>
        <mycbl><div>其他人的代码实现</div></mycbl>
    </div>
    <!-- 定义一个模板 -->
    <template id="mycbl">
        <div>
            以下内容是个人自己定义：
            <slot></slot>   
            <slot></slot>
            <slot></slot>
        </div>
    </template>
    <script>
        //插槽的使用，插槽就是预留一部分内容给其他人有自己的实现

        const app = new Vue({
            el: "#app",
            data: {
                message: "hello ,chen"
            },
            components: {
                'mycbl' : {
                    template: "#mycbl"
                }
            }
        })
    </script>
</body>
</html>

访问结果如下：

2.如果有多个插槽，想指定替换某个插槽的内容怎么办，这就需要使用到name属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id="app">
        <mycbl>
            <div slot="first">我的第一个实现代码</div>
            <div slot="second">第二个实现</div>
            <div slot="third">第三个实现</div>
        </mycbl>
        <!-- <mycbl><div>其他人的代码实现</div></mycbl> -->
    </div>
    <!-- 定义一个模板 -->
    <template id="mycbl">
        <div>
            以下内容是个人自己定义：
            <slot name="first"></slot>
            <slot name="second"></slot>
            <slot name="third"></slot>
        </div>
    </template>
    <script>
        //插槽的使用，插槽就是预留一部分内容给其他人有自己的实现

        const app = new Vue({
            el: "#app",
            data: {
                message: "hello ,chen"
            },
            components: {
                'mycbl' : {
                    template: "#mycbl"
                }
            }
        })
    </script>
</body>
</html>

3.作用域插槽的使用方式

比如有这样一个场景，子组件以列表的形式实现一个数组的列表，而父组件使用子组件的时候对该列表有自己的实现方式，但它需要获取子组件的数据并对其展示，这里就使用到了作用域插槽

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id="app">
        <mycbl>
            <template slot="first" slot-scope="slot">
                    <div>
                        {{slot.data.join(" * ")}}
                    </div>
            </template>
            <!-- <div slot="second">第二个实现</div>
            <div slot="third">第三个实现</div> -->
        </mycbl>
        <!-- <mycbl><div>其他人的代码实现</div></mycbl> -->
    </div>
    <!-- 定义一个模板 -->
    <template id="mycbl">
        <div>
            以下内容是个人自己定义：
            <slot name="first" :data="clan">
                <ul>
                    <li v-for="item in clan">{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script>
        //插槽的使用，插槽就是预留一部分内容给其他人有自己的实现

        const app = new Vue({
            el: "#app",
            data: {
                message: "hello ,chen"
            },
            components: {
                'mycbl' : {
                    template: "#mycbl",
                    data(){
                        return {
                            clan:['java','js','jquery','python','C++','C#']
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

运行结果：

cbl1369732

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js插槽slot的相关使用

1.插槽slot的基本使用，插槽的使用目的是预留一个地方给其他人有自己的实现方式如果你想在模板中有一部分需要预留出来就使用slot标签，如果你想写自己的实现代码你就在子组件的标签中写自己的实现内容：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录