浅谈Vue中插槽slot的使用方法

2024-11-27 07:03:20

如何定义和使用：

在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值，如果slot标签没有声明name属性值，在使用插槽时将默认从第一个插槽依次往下放置，为了方便使用，一般都会都插槽slot指定一个name属性值，当要使用该插槽时，只需要在要使用的标签内添加slot=‘插槽名字',就可以将指定的标签放到指定的插槽内，插槽内可以是任意内容。

举例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>slot插槽练习</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <div style="border: 7px solid blueviolet;">

            <h2>父组件</h2>

            <cpn>

                <!-- 将一个元素添加到指定得插槽位置 -->

                <button slot="left">按钮</button>

                <input type="text" slot="right" placeholder="这是输入框..."></input>

            </cpn>

        </div>

    </div>

    <template lang="" id="cpn">

        <div style="border: 6px solid green;">

            <h2>子组件</h2>

            <!-- 在子组件中定义三个插槽，插槽内得值为默认值 -->

            <slot name="left">左</slot>

            <slot name="mediate">中</slot>

            <slot name="right">右</slot>

        </div>

    </template>

    <script>

        new Vue({

            el:'#app',

            components:{

                cpn:{

                    template:'#cpn',

                }

            }

        })

    </script>

</body>

</html>

效果如图：

分析:

在上面实例中，子组件中定义了三个插槽，并给了具体的name属性值，在父组件调用子组件中，子组件内给name为left的插槽位置放置了一个按钮，将并将一个输入框放置到name为right的插槽。从中我们可以发现，通过使用插槽，可以使组件有更多的扩展，插槽内的内容可以是任意内容，定义插槽，相当于提前给组件挖好一个坑，等后面用到的时候再调用。

到此这篇关于浅谈Vue中插槽slot的使用方法的文章就介绍到这了,更多相关Vue中插槽slot用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

本文实例讲述了vue 使用插槽分发内容操作.分享给大家供大家参考,具体如下: 单个插槽除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃.当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身. 最初在 <slot> 标签中的任何内容都被视为备用内容.备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容. 例: <!DOCTYPE html> &
vue具名插槽的基本使用实例

前言具有名字的插槽slot使用中的 "name" 属性绑定元素注意: 1,如果没有匹配到则放到匿名的插槽中 2,具名插槽的渲染顺序,完全取决于模板,而不是取决于父组件中元素的顺序 vue的匿名插槽(默认插槽) 父组件 <div> <myslot>我是刚刚</myslot> </div> 子组件 <div> <slot><slot> </div> vue的具名插槽父组件 <di
vue默认插槽的理解与实例代码

目录什么是插槽默认插槽的理解代码片段总结什么是插槽插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML.组件等,填充的内容会替换子组件的<slot></slot>标签. 默认插槽的理解就是利用完全标签() 在它完全标签里写相应的配置(比如:我们需要的功能) 然后利用默认插槽这个标签把写好的会放到这个插槽里去(这个插槽一般式存在于子组件的,所以就可以把父组
详解Vue slot插槽

1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件(传的是HTML格式). 父组件App: 子组件Category: 在父组件或者子组件里都可以给插槽中的内容设置样式,效果一样作用域插槽: 1.理解:数据在组件的自身(Category),但根据数据生成的结构需要组件的使用者(APP)来决定.(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定) 子组件在给父组件传数据子: 父: 使用atguigu这样一
解决父子组件通信的三种Vue插槽

目录前言环境准备 Category组件 App组件一.默认插槽二.具名插槽三.作用域插槽总结前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些.更多时候也会更加方便. 今天介绍Vue中三种插槽吧:默认插槽.具名插槽.作用域插槽. 环境准备先搭个初始环境给大家看看哈.一步一步讲完这个插槽. 就是写了一个类别组件,分别渲染这三种数据. Category组件 <template> <div class=&q
Vue中的匿名插槽与具名插槽详解

目录 1.匿名插槽 2.具名插槽总结 slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口. 插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的. slot又分三类,默认插槽,具名插槽和作用域插槽.(这里说前两种) 插槽的实质是:插槽实质是对子组件的扩展,通过<slot>插槽-----向组件内部"指定位置"传递内容. 1.匿名插槽默认插槽:又名匿名插槽,当slot没有指定name属
Vue匿名插槽与作用域插槽的合并和覆盖行为

Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段中有对应 slot 特性的元素. 仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽. 具体应用的时候: 1.匿名插槽的合并行为: <div id="app"> <myele> <div> default slot </div
浅谈Vue中插槽slot的使用方法

如何定义和使用: 在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值,如果slot标签没有声明name属性值,在使用插槽时将默认从第一个插槽依次往下放置,为了方便使用,一般都会都插槽slot指定一个name属性值,当要使用该插槽时,只需要在要使用的标签内添加slot='插槽名字',就可以将指定的标签放到指定的插槽内,插槽内可以是任意内容. 举例: <!DOCTYPE html> <html lang="en"> <head&
Vue中插槽slot的使用方法与应用场景详析

什么是插槽? 我们知道在Vue中 Child 组件的标签的中间是不可以包着什么的 . 可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+: 插槽,其实就相当于占位符.它在组件中给你的HTML模板占了一个位置,让你来传入一些东西.插槽又分为匿名插槽.具名插槽.作用域插槽. 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令).它取代了 slot 和 slot-sc
Vue中插槽slot的使用方法

目录 1.什么是插槽 2.插槽的使用 3.v-slot指令 4.具名插槽 5.具名插槽的简写形式 6.作用域插槽 7.解构插槽 Prop 1.什么是插槽插槽(slot)是 vue 为组件的封装者提供的能力.允许开发者在封装组件时,把不确定的.希望由用户指定的部分定义为插槽. 2.插槽的使用在封装组件时,可以通过元素定义插槽,从而为用户预留内容占位符. // 子组件 <template> <div class="left-container"> <h
浅谈vue中改elementUI默认样式引发的static与assets的区别

首先从这说起 vue项目中的elementUI的默认样式怎么改由于elementUI的样式太单调,比如这个slider滑块 elementUI中的API是没办法改变这个slider的颜色的,可是老板喜欢很黄,非要用yellow色.
浅谈Vue中render中的h箭头函数

vue2.0新增了render方法,官方案例写的是: render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app) } 用es6的写法就是:(只有一个个return语句,可以省略return和{}) render: createElement=>createElement(app) 将createElement改成 h 就是官方写法. 使用 h 的理由,
浅谈vue中组件绑定事件时是否加.native

组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template>  <input type="text" @keyup.native="show($event)
浅谈vue中document.getElementById()拿到的是原值的问题

问题两个界面都有id="test"的div,内容不同,路由切换的时候document.getElementById()拿到的是原界面的值. 问题代码 // 页面1 <div id="test">aaa</div> // 页面2 <div id="test">bbb</div> // 路由切换如下: <transition name="card-fade"> <
浅谈vue中$bus的使用和涉及到的问题

Hello大家周末好,最近项目比较忙所以没有及时的更新抱歉,今天给大家讲一vue.bus.使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到(每一个领域都是会有坑的呀). 1:创建$bus文件创建一个文件内容如下: import Vue from 'vue' export default new Vue(); 2:引入$bus main.js: import Bus from './views/bus/bus'; Vue.prototype.$bus = Bus;
浅谈vue中使用编辑器vue-quill-editor踩过的坑

结合vue+element-ui+vue-quill+editor二次封装成组件 1.图片上传分析原因项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差. 引入element-ui 编辑editor.vue文件 <template> <div> <
浅谈vue中get请求解决传输数据是数组格式的问题

qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的复数格式,因此indices是索引的意思 //bracket是括号的意思,因此arrayFormat:'brackets'代表数组下标为空[] qs.stringify({ arr: [1,2,3] }, { indices: false }) //arr=1&arr=2&arr=3 qs.s

浅谈Vue中插槽slot的使用方法

相关推荐

随机推荐