436 vue slot:插槽基本使用,具名插槽,作用域插槽

1. 插槽 : 替换内容 / 分发内容

  (1)占位,像出口<router-view></router-view>。
  (2)没有新的内容放进来,就用默认的。
  (3)<slot></slot>将被替换成组件内的对应子节点。


2. 基本使用

<el-car>
    <div>宝马发动机</div>
</el-car>

组件的内部


02-插槽的基本使用.html

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

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!--
      需求1 :  仅仅是改文字
       大众发动机 => 奥迪发动机
      需求2 : 文字 + 标签
      <div>大众发动机</div>  => <p>奥迪发动机</p>

      插槽 :  替换内容 / 分发内容 【占位,没有新的内容放进来,就用默认的。】

     -->
    <div id="app">
        <!-- 第一次使用 -->
        <el-car>
            <div>大众发动机</div>
        </el-car>
        <!-- 第二次使用 -->
        <el-car>
            <p>奥迪发动机</p>
        </el-car>
        <!-- 第三次使用 -->
        <el-car></el-car>
    </div>

    <script src="./vue.js"></script>
    <script>
        // 注册组件
        Vue.component(‘el-car‘, {
            template: `
                <div>
                    <h3>提示</h3>
                    // slot 可以给默认的内容,也可以不给,不给就没内容,就不显示
                    <slot>
                        <p>国产雅迪迪</p>
                    </slot>
                    <button>取消</button>
                    <button>确定</button>
                </div>
            `
        })

        const vm = new Vue({
            el: ‘#app‘,
            data: {}
        })
    </script>
</body>

</html>

3. 具名插槽

    <h3 slot=‘n1‘>提示</h3>
    <p slot=‘n2‘>奥迪发动机</p>

组件的内部


03-插槽的具名.html

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

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!--
        具名 : 给插槽加个名字
        【场景:有2个以上的插槽,视情况替换某个/些插槽。】
        需求3 : 把 提示 和 大众发动机 都要给替换掉
    -->

    <div id="app">
        <!-- 第一次使用 -->
        <el-car>
            <!-- 这里,slot属性给普通标签添加,不是给组件标签添加 -->
            <h3 slot="n1">大众提示</h3>
            <div slot="n2">大众发动机</div>
        </el-car>

        <!-- 第二次使用 -->
        <el-car>
            <h3 slot="n1">奥迪提示</h3>
            <p slot="n2">奥迪发动机</p>
        </el-car>
    </div>

    <script src="./vue.js"></script>
    <script>
        // 注册组件
        Vue.component(‘el-car‘, {
            template: `
                <div>
                    // 这里,具名插槽,加上name属性。
                    <slot name=‘n1‘></slot>
                    <slot name=‘n2‘></slot>
                    <button>取消</button>
                    <button>确定</button>
                </div>
            `
        })

        const vm = new Vue({
            el: ‘#app‘,
            data: {}
        })
    </script>
</body>

</html>

04-模拟一个el-input.html

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

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <el-input>
            <!-- append:就会去替换 -->
            <span slot="append">搜索</span>
        </el-input>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 组件
        Vue.component(‘el-input‘, {
            template: `
                <div>
                    <slot name=‘prepend‘></slot>
                    <input />
                    <slot name=‘append‘></slot>
                </div>
            `
        })

        const vm = new Vue({
            el: ‘#app‘,
            data: {}
        })
    </script>
</body>

</html>

4. 作用域插槽

组件的子节点想访问组件内部的数据

<el-car>
    <!--
        <p slot-scope=‘scope‘>发动机样式 : {{ scope.type }} {{ scope.num }} {{ scope.row.id }}</p>
     -->

     <!-- 都是套一个template -->
     <template slot-scope=‘scope‘>
        <p>发动机样式 {{ scope.type }} {{ scope.row.id  }}</p>
     </template>
</el-car>
  • 组件内部
<slot :type=‘type‘ num=‘123‘></slot>
data(){
    return {
        type :‘EA888‘,
        row : {
            id : 500
            username : ‘admin‘
        }
    }
}

05-作用域插槽.html

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

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!--
        作用域插槽 : 获取值
        > 子节点 p 想访问 组件内部的数据 type 无法访问
        > 因为组件封闭独立的个体
    -->

    <div id="app">
        <el-car>
            <!-- 凡是 slot 里面的属性 都将作为 scope 的属性存在 -->

            <!-- 这是 vue 2.5.0 之前的写法
                <p slot-scope="scope">
                    发动机样式 : {{ scope.row.id }} {{ scope.num }} {{ scope.type }}
                </p>
            -->
            <!-- vue 2.5.0 之后, slot-scope 要写在 template 里面了 -->

            <template slot-scope="scope">
                <p>发动机样式: {{ scope.row.id }}</p>
                <p>用户名 : {{ scope.row.username }}</p>
            </template>
        </el-car>
    </div>

    <script src="./vue.js"></script>
    <script>
        // 组件
        Vue.component(‘el-car‘, {
            template: `
                <div>
                    <h3>提示</h3>
                    <slot :type=‘type‘ num=‘1234‘ :row=‘row‘ ></slot>
                    <button>取消</button>
                    <button>确定</button>
                </div>
            `,
            data() {
                return {
                    type: ‘EA888‘,
                    row: {
                        id: 500,
                        username: ‘admin‘
                    }
                }
            }
        })

        const vm = new Vue({
            el: ‘#app‘,
            data: {}
        })
    </script>
</body>

</html>

5. 插槽 : 2.6 一下的 (element) => slot / v-slot (后面说)

原文地址:https://www.cnblogs.com/jianjie/p/12636123.html

时间: 2024-11-02 17:39:27

436 vue slot:插槽基本使用,具名插槽,作用域插槽的相关文章

vue slot插槽的使用方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> </head> <

vue slot插槽的使用

slot插槽的使用场景 父组件向子组件传递dom时会用到插槽 作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定 注:想要修改父组件向子组件传递的元素的样式时,只能在对应的子组件进行修改 1.具名插槽的使用  父组件 <template slot="header"> <p>我是头部</p> </template> 子组件 <slot name="header"

新版本的作用域插槽以及旧版本的slot

新版本的作用域插槽以及旧版本的slot 1.作用/概念:预先将使用的内容进行保留 我的理解就是父页面在组件标签内插入任意内容,子组件内插糟slot控制摆放位置(匿名插槽,具名插槽) 案例: <body> <div id='app'> <Hello> <div> 这里是插入的内容 //这一部分的内容并不会被输出(原因是被组件覆盖掉了) </div> </Hello> </div> <template id="

具名插槽、作用域插槽的新写法

插槽 具名插槽 自 2.6.0 起有所更新.已废弃的使用 slot attribute 的语法 但是我们有了新的语法,如下: 子组件 childCom: <template id="childCom"> <div> <!-- 具名插槽的针对于组件中不止一个插槽的情况下使用,使用方式,即:给每个插槽指定 name 属性,在使用的时候需要给标签设置 slot 属性,且属性值为 对应的 name 属性的属性值 --> <slot name='left

使用slot分发内容 作用域插槽

除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会别丢弃.当子组件模板只有一个没有属性的slot时,父组件整个内容片断将插入到slot所在的DOM位置,并替换掉slot标签本身. 最初在 <slot> 标签中的任何内容都被视为备用内容.备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容. 作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素. 在子组件中,只需将数据传递到插槽,就像你将 prop

Vue组件之作用域插槽

写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示子组件模板中定义的"<p>父组件如果没有插入内容,我将被显示</p>"这一则内容,但如果<child-component></child-component>标签之间有插入内容的话,则子组件模板中的<slot></slot&

细说Vue作用域插槽,匹配应用场景。

最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子,你会一看就懂): 1. 组件中的slot标签只能有有一个,而这一个slot用于替代组件调用时的多个标签.即一个slot代替一组范围的标签,即为作用域. 2. 作用域插槽的特殊在于:可在上层作用域中通过临时变量拿到组件定义时通过作用域插槽传递的数据. 3. 作用域插槽的技巧在于:可在上层作用域中通过拿

[干货]关于vue作用域插槽的新的深入理解

父级组件 <template> <div class="wrapper"> <son1 title="标题3" :content="listData3" @father="teClick"> <template v-slot="scope"> <b class="qianz">{{scope.item.prefix ? '有前缀

Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单元格数据的显示格式,我们可以通过作用域插槽自定义数据的显示格式,对于二次开发来说具有很强的扩展性. 作用域插槽使用<template>来定义模板,可以带两个参数,分别是: slot-scope    ;模板里的变量,旧版使用scope属性 slot              ;该作用域插槽的nam