使用插槽的时候其实就是引用子组件,在引用的组件中间写上你要的代码,然后在子组件的的<slot ></slot>中就包含父组件写下的代码。

父组件

import addshop from './addshop.vue' //引入子组件
//使用子组件
<addshop v-slot="obj" :pu = 'msg'>//v-slot 接受的是子组件传过来的值 ,pu是随便取的名字,用户自定义的是传给子组件的值(变量)
<span>你是不是傻</span>
<p>{{obj.id}}</p>//子组件传过来的obj在标签里面
</addshop>

子组件

  <slot :id = 'id'></slot>//传给父组件的值记得和父组件接受组件名字一致
props:['pu'],//父组件传来的值要接受

使用vue的插槽理解的更多相关文章

  1. 通过UI库深入了解Vue的插槽的使用技巧

    Vue官网对于插槽的介绍比较简略,插槽本身也比较"烧脑",很容易看晕,我就一直没看懂,直到 使用了element-plus的组件的插槽. 其实我们可以换一个角度来理解插槽,就会豁然 ...

  2. vue.js插槽

    具体讲解的url https://github.com/cunzaizhuyi/vue-slot-demo //例子 用jsfiddle.net去运行就好 <!DOCTYPE html> ...

  3. 沉淀,再出发:VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  4. Vue中插槽指令

    08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...

  5. vue插槽理解

    1.插槽作用:父向子传递一段Html代码块 2.分类: (1)默认插槽:规则:父给子传,用父,不传,用子. (2)具名插槽:适用于一个页面有多个插槽时,需要做区分,使用name属性.给插槽取个名字 ( ...

  6. Vue slot插槽

    插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...

  7. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  8. vue作用域插槽的应用

    问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...

  9. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

  10. Vue slot-scope的理解(适合初学者)

    百度上已经有很多的关于slot-scope的文章,但我感觉都是那些以前没学好,又回头学的人,他们都使用了.Vue文件,我觉得有点不适合初学者,所以我就写一篇适合初学者的. 先抛例程: <!DOC ...

随机推荐

  1. 硬件IIC的重映射使用问题

    目录 沁恒的蓝牙系列芯片,有映射硬件模块去其他引脚的功能,可以配置各芯片的功能引脚重映射寄存器(R16_PIN_ALTERNATE),或者使用函数GPIOPinRemap函数进行配置. 比如说想要配置 ...

  2. Centos 7.9 基于二进制文件部署kubernetes v1.25.5集群

    简述 Kubernetes(简称为:k8s)是Google在2014年6月开源的一个容器集群管理系统,使用Go语言开发,用于管理云平台中多个主机上的容器化的应用,Kubernetes的目标是让部署容器 ...

  3. Gitbook编写JSON文件

    title: Gitbook编写JSON文件 # 标题 date: 2020-10-31 16:34:30 updated: 2020-12-31 categories: 前端 tags: JSON ...

  4. Windows10免安装版的Mysql

    文章转载出处https://www.cnblogs.com/winton-nfs/p/11524007.html 免安装版的Mysql MySQL关是一种关系数据库管理系统,所使用的 SQL 语言是用 ...

  5. 发生错误:请确认您的电脑是否安装了excel软件,并且您的浏览器是否允许远行excel!具体操作请查阅帮助.

    1.要先下载 activeX 这个控件 2.进入internet选项--->安全--->将安全级别调到最低 3,是否下载了excel. 4,关闭window防火墙

  6. 组件中的data为什么不是一个对象而是一个函数?

    组件中的data为什么不是一个对象而是一个函数? 组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于 ...

  7. MySQL下载,安装,配置环境变量【0基础小白用】

    一,下载 选择社区版的,下载地址:https://dev.mysql.com/downloads/installer/  ,选择离线安装包 二,安装 1,双击安装包文件,这里选择服务模式,会安装在默认 ...

  8. 三、核心实战-服务Service-Ingress

    Service 将一组Pods公开为网络服务的抽象方法. 暴露deployment只能在集群内访问是ClusterIP,可以集群外访问是NodePort,默认端口分配是30000-32767之间 ku ...

  9. 【笔记】gitlab+openldap使用memberof筛选登录用户

    这几天在搞kerberos+nfs4 没搞成 之前搞了个openldap实现了分散控制集中管理(不是DCS...) gitlab和nexus也支持ldap 虽然都不咋好用 但是在搞gitlab的时候发 ...

  10. pycharm 连接 docker容器

    1.ubuntu 18.04 先安装sudo apt-get install openssh-server 2.修改" /etc/ssh/sshd_config" 改成 Permi ...