Vue框架2.0基础知识(6）插槽的使用

放学后J

已于 2022-02-22 10:06:20 修改

阅读量274

点赞数 1

文章标签： javascript html 前端

于 2022-02-22 09:12:48 首次发布

本文链接：https://blog.csdn.net/weixin_46256704/article/details/123056802

版权

插槽的概念：插槽的关键字slot，默认情况下，组件中的模板会覆盖组件中的原始内容（即自定义标签对内部的内容会不显示），解决办法就是使用插槽。

组件的原始内容：即在vue实例范围之内，因此可以调用实例的data和methods

插槽共分为3中：

插槽的结构：

匿名插槽：<slot></slot>

具名插槽：<slot name=top></slot>

作用域插槽:<slot title='标题' :num=count></slot>

1.匿名插槽

匿名插槽会储存html组件标签内匿名的标签和元素。

匿名插槽的作用：保留组件中的所有原始标签内容，这种插槽被称为匿名插槽

直接在组件中写上html标签对，就可以在根元素中的引用的组件中间显示所写的内容

html代码如下：

  <!-- html -->
<div id="app">
        <father>
            <button @click="pop">弹出</button>
            <h1>这是一个h1标签</h1>
        </father>
    </div>

js代码如下：

 <template id="father">
        <div>
            这是一个Father组件
            <slot name="default"></slot> //可以简写成<slot></slot>,匿名插槽会储存默认的所有元素
        </div>
    </template>
1

2.具名插槽
只能放具体的name对应的标签元素，并且最终渲染取决于模板标签内的具名插槽顺序。

html代码如下：

  <div id="app">
        <father>
            <!-- 给插槽取名字 -->
            <h4 slot="wgd">我是wgd</h4>
            <h1 slot="h1">这是一个h1标签</h1>
            <h2>这是一个h2 标签</h2>
            <h3>这是一个h3 标签</h3>
        </father>
    </div>

js代码如下：

  <template id="father">
        <div>
            这是一个Father组件
                <!-- 元素的位置由template中的具名插槽的摆放位置有关 -->
            <slot name="h1"></slot>
            <slot name="default"></slot>
            <slot name="wgd"></slot>

        </div>
    </template>

效果图如下：

3. 作用域插槽
在讲解作用域插槽之前我们需要注意到插槽的一个属性，就是它可以访问当前组件父组件。这一点类似$parent。我们来看下一段代码：

<body>
    <div id="app">
     <father></father>

    </div>

    <!-- 各个模板的书写 -->
    <template id="son">
        <div>
            Son
            <slot></slot> 
            <!-- 这里是插槽，用来接收元素和标签 -->
        </div>

    </template>

    <template id="father">
        <div>
            Father
            <son>
                {{money}}  
                <!-- 这里写了元素，money虽然写在son标签内但是却是像father组件获取的 -->
            </son>

        </div>
    </template>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let son = {
            template: '#son'
        }


        let father = {
            template: '#father',
            components: {
                son
            },
            data() {
                return {
                    money: 111234
                }
            }

        }

        const app = new Vue({
            el: '#app',
            components: {
                father,
              
            }
        })
    </script>
</body>

效果图如下：

可以看到father组件中的data已经渲染出来，所以插槽可以访问当前组件的父亲组件,如果没有父亲组件则访问Vue实例。

作用域插槽:我理解它改变了插槽原有的访问父亲组件的属性，现有的属性由当前组件以及自定义获得。使用方法如下：
收先在html的组件标签中我们添加 v-slot='自定义对象'

<div id="app">
        <mynav v-slot="myscope">
        <!-- v-slot接收 -->
            {{myscope.color}}
            <h1 :style="{color:myscope.color}">这是一个h1标签</h1> //注意这里接收到了传递过来的color属性
        </mynav>
    </div>

紧接着，我们想利用插槽传递什么属性需要在插槽中写出，使用方法如下：

<script>
        let mynav = {
            template: "<div><slot :color='color'></slot></div>",  //注意这里传递了color属性
            data() {
                return {
                    color: "red"
                }
            }
        }
        const app = new Vue({
            el: '#app',
            data: {
                // color: "red"
            },
            components: {
                mynav
            }
        })
    </script>