具名插槽 slot (二)

slot 是父组件与子组件的通信方式
可以将父组件的内容显示在子组件当中
或者说可以将 让你封装的组件变的更加的灵活,强壮!

在子组件中  通过为多个slot进行命名。来接受父组件中的不同内容的数据  这就是命名插槽

插槽slot与slot之间不能有html元素

但是html可以把插槽包裹起来

所以插槽可以动态向子组件传递值

子组件

<template>

<div>

<h1>我是组件</h1>

<h2>我是组件中显示的内容</h2>

<div>

<slot name="pass1"></slot>

<div>我是第一插槽下面的内容</div>

</div>

<slot name="hei"></slot>

<div>

<slot name="wang"></slot>

<div>这是第三个插槽下面的内容</div>

</div>

</div>

</template>

 
父组件<template>
  <div>
    <!-- 第一种 -->
    <slotexmple>
      <div slot="wang">我是第三个插槽</div>
    </slotexmple>
  </div>
</template>

<script>
import slotexmple from "../../components/slot-exmple";
export default {
  data() {
    return {};
  },
  components: {
    slotexmple
  }
};
</script>

原文地址:https://www.cnblogs.com/IwishIcould/p/11886432.html

时间: 2024-11-09 06:03:37

具名插槽 slot (二)的相关文章

vue 插槽slot

本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 注意两点: <app> 组件不知道它会收到什么内容.这是由使用 <app> 的父组件决定的. <app>

饿了么表格二次封装具名插槽append的分装实现

1)在封装组件中使用table具名插槽,并自定义具名插槽,对外开发使用:commonTable <template> <div class="common-table-style"> <el-table :data="tableData" tooltip-effect="dark" border highlight-current-row :max-height="maxHeight" :empt

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

vue插槽slot的理解与使用

一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了.后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去重写子组件是很不明智的一件事,当然也可以将不同之处都写在子组件里,然后通过父组件传来的标识进行选择显示.其实质是对子组件的扩展,通过slot插槽向组件内部指定位置传递内容,即将<slot>&l

Vue中插槽slot的使用

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

具名插槽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <title>具名插槽</title> </head&g

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

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

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的插槽slot

插槽是写在子组件上,用啦留给父级添加内容的位置接口: 1. 父级里的 <template :is='子标签名'>父插入内容</template>标签,里的内容       slot 标签位置 规定了父插入内容的位置. 2.slot标签 有name属性,通过设置不同的name值,实现父级不同的元素插在对应的位置 原文地址:https://www.cnblogs.com/dangdanghepingping/p/10254486.html