vue中的slot理解和使用

最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力。

在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue的相关环境,创建了一个项目,实际动手看看是什么东西,

现理解为: 用父组件的内容去替换掉子组件的内容;

根据父组件中的

<div slot="slot1">slottest</div>

如果引入的子组件中有

<slot name="slot1">123432<slot>

那么子组件的123432 将会被不显示,而是被替换为slottest;

在项目的实际应用如:假设我们的项目中有个搜索组件,其中搜索组件为:

用户的姓名,性别,电话号码:  该组件定义为组件1

组件1 可以被所有的页面所采用,但是在有些页面则会需要 添加一项:比如根据邮箱查询:

我们是重新写一个新的组件,还是通过修改我们写好的组件方便呢:

改造如下:在子组件中添加一个标签<slot name="othercondition"></div>

子啊父组件中:我们可以添加如下的代码:

<div slot="othercondition">

<label>邮箱<label><input type="Email">

</div>

这样改造的话,我们不需要重新新增一个项目文件,只需要在引用的父组件中添加几行代码就行了,这样就减少了代码量,同时方便插件的扩展;

原文地址:https://www.cnblogs.com/yanwuming/p/9286400.html

时间: 2024-11-09 00:55:28

vue中的slot理解和使用的相关文章

vue中的slot与slot-scope

深入理解vue中的slot与slot-scope vue+element-ui+slot-scope或原生实现可编辑表格 原文地址:https://www.cnblogs.com/knuzy/p/9485951.html

vue中mixins的理解及应用

vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? mixins 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式. 混合对象可以包含任意组件选项. 当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项. mixins理解 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组

深入理解vue中的slot与slot-scope

<template> <div class="father"> <h3>这里是父组件</h3> <child> <div class="tmpl"> <span>菜单1</span> <span>菜单2</span> <span>菜单3</span> <span>菜单4</span> <span

Vue中的slot(占坑,预留位置)

子模板不使用slot 子模板使用slot 子模板使用使用name属性,且传递data 文件名:Slots.vue //slot组件 <template> <div class="Slots"> <div class="myd"> 在子组件中不使用slot时SlotChildwithnoslots下的内容不会显示 <SlotChildwithnoslots> <div class="no-name&quo

vue中nextTick的理解

A. vue 中的 nextTick 是什么? 1.首先需要清楚,nextTick是一个函数:这个函数的作用,简单理解就是下一次渲染后才执行 nextTick 函数中的操作: 2.在下一次 DOM 更新循环结束之后延迟回调,也就是延迟执行一段代码. B. 什么情况下使用 nextTick 函数? 当项目数据改变后,需要对新改动的元素进行视图操作的时候,可能数据值已经进行修改,但是视图还没更新,直接操作报错的时候: C. nextTick函数解决什么问题? 数据值修改,视图没有立即更新,直接使用提

Vue中插槽slot的使用

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类. 非插槽模板指的是html模板,比如‘div.span.ul.table’这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制: 插槽模板是slot,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的html模

vue中的插槽slot理解

本篇文章参考赛冷思的个人博客 1.函数默认传参 在我们写js函数我们的可能会给他们一个默认的参数,写法是 function show(age,name){ var age = age || 20; var name = name || 张三; console.log(age,name); } show(); // 20,张三 show(18,"命名") // 18,明明 如果用户不传入参数,那么会输出默认值,如果用户传入,会输出传入的值,这种写法很灵活 vue中的组件,也可以有默认的模

理解Vue中的Render渲染函数

VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现如下html: <div id="container"> <h1> <a href="#"> Hello world! </a> </h1> </div> 我们会如下使用: <!DOCTYPE html> <html

【Vue】彻底理解Vue中render函数与template的区别

一.render函数与template对比 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数. 以下我们来做一个需求跟根据level等级来编写对应等级的标题 template解析 <body>   <divid="app">       <h-titlelevel=1>           <p>li</p>       </