Vue.js中插槽的使用

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

coucouxie

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

阅读量320

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/coucouxie/article/details/108393689

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue.js中插槽的使用

vue中插槽的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <comp1>这是插槽内容</comp1>
    </div>
    <script>
        var comp1 = {
            data() {
                return {
                    msg: 'hello'
                }
            },
            template: `<h1>子组件<br><slot></slot></h1>`//slot就是挖一个空然后在后面填充
        }
        var app = new Vue({
            el: '#app',
            components: {
                comp1
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。

<script>
        var comp1 = {
            data() {
                return {
                    msg: 'hello'
                }
            },
            template: `<h1>子组件<br><slot>这是后备内容</slot></h1>`//slot就是挖一个空然后在后面填充
        }
        var app = new Vue({
            el: '#app',
            components: {
                comp1
            }
        })
    </script>

当组件里的内容为空时，就会渲染后备内容

  <div id="app">
        <comp1></comp1>
    </div>

在这里插入图片描述
具名插槽

在slot中指定 name="footer"指定插槽的名字，
然后再模板中指定对应的这是具名插槽的底部 v-slot:footer,footer就是填充到插槽的具体位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <comp1>
            <template v-slot:footer>这是具名插槽的底部</template>
            <template v-slot:header>这是具名插槽的顶部</template>
        </comp1>
    </div>
    <script>
        var comp1 = {
            template: `<h1><header><slot name='header'></slot></header>
                <footer><slot name='footer'></slot></footer></h1>`
        }
        var app = new Vue({
            el: '#app',
            components: {
                comp1
            }

        })
    </script>
</body>

</html>

作用域插槽
为了让父组件可以访问子组件的数据，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <comp1>
            <template v-slot:header="header">这是具名插槽的顶部{{header}}</template>
            <template v-slot:footer="header">这是具名插槽的底部</template>
        </comp1>
    </div>
    <script>
        var comp1 = {
            data() {
                return {
                    msg: '这是comp1作用域的数据'
                }
            },
            template: `<h1><header><slot name='header' v-bind:header="msg"></slot></header>
                <footer><slot name='footer'></slot></footer></h1>`
        }
        var app = new Vue({
            el: '#app',
            components: {
                comp1
            }

        })
    </script>
</body>

</html>

在这里插入图片描述

coucouxie

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js中插槽的使用

Vue.js中插槽的使用vue中插槽的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=
复制链接

扫一扫