slot插槽

最新推荐文章于 2023-12-14 20:33:53 发布

坏萝卜

最新推荐文章于 2023-12-14 20:33:53 发布

阅读量70

点赞数 1

分类专栏： vue2 文章标签： vue

本文链接：https://blog.csdn.net/qq_52135740/article/details/118607791

版权

vue2 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

slot插槽

组件的插槽：

1.组件的插槽也是为了让我们封装的组件更加具有扩展性。

2.让使用者可以决定组件内部的一些内容到底展示什么。

slot使用

1.插槽的基本使用 <slot></slot>

2.插槽的默认值 <slot>默认值</slot>

3.如果有多个值，同时放入到组件进行替换，一起作为替换元素

<body>
    <div id="app">
        <cpn><button>按钮</button></cpn>
        <cpn><span>哈哈哈哈哈</span></cpn>
        <cpn><i>呵呵呵</i></cpn>
        <cpn></cpn>
        <cpn>
            <div>div1</div>
            <p>p元素</p>
            <h1>h1元素</h1>
        </cpn>
    </div>
</body>
<template id="cpn">
    <div>
        <h2>我是子组件</h2>
        <slot>
            <div>默认值</div>
        </slot>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: { },
        components: {
            cpn: {
                template: "#cpn"
            }
        }
    })
</script>

效果：

在这里插入图片描述

具名插槽的使用

<body>
    <div id="app">
        <cpn><button slot="left">返回</button><span slot="center">标题</span></cpn>
        <cpn><span slot="center">标题</span></cpn>
        <cpn><span slot="right">菜单</span></cpn>
    </div>
</body>
<template id="cpn">
    <div>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        components: {
            cpn: {
                template: "#cpn"
            }
        }
    })
</script>

效果：

在这里插入图片描述

编译作用域

官方给出一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

下面在使用<cpn v-show="isShow"></cpn>的时候，整个组件的使用过程相当于子啊父组件中出现的

那么它的作用域就是父组件，使用的属性也是父组件的属性。

因此，isShow使用的是Vue实例中的属性，而不是子组件的属性。

在这里插入图片描述

效果图：

在这里插入图片描述

作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供。

案例要求：

子组件中包括一组数据，比如：pLanguages: ['javaScript', 'Python', 'Swift', 'Go', 'C++']

需要在多个界面进行展示：

某些界面是以水平方向一一展示

某些界面是以列表展示

内容在子组件，希望父组件告诉我们如何展示，就可以是使用slot作用域插槽。

在这里插入图片描述

效果图：

在这里插入图片描述

坏萝卜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
slot插槽

slot插槽组件的插槽：1.组件的插槽也是为了让我们封装的组件更加具有扩展性。2.让使用者可以决定组件内部的一些内容到底展示什么。slot使用1.插槽的基本使用 <slot></slot>2.插槽的默认值 <slot>默认值</slot>3.如果有多个值，同时放入到组件进行替换，一起作为替换元素<body> <div id="app"> <cpn><button>按钮&lt
复制链接

扫一扫

专栏目录