(尚033)Vue_案例_slot(组件间的通信4:slot)

1.组件间的通信4:slot(slot:插槽,就是一个占位)

slot用于标签反复使用很多次

1.1理解

此方式用于父组件向子组件传递标签数据, 其他为数据通信

外面组件向里面组件传递标签进去,直接拿我的标签显示数据就行

假如我传递的是数据,我还得映射成标签,才能显示数据

1.2子组件Child.vue

1.3父组件:Parent.vue

注意底下这两个<div>与上面的<slot>是对应关系

=================================================================================================================================

同一个组件,写了两个标签

我设计组件的时候，设计几个占位，占位本身并不显示东西，需要写入东西才会显示

===================================================================================================================================

1.设计3个插槽

本质来说当前实例完全没必要使用slot，因为就一个条

页面截图:

现在想给某一个插槽指定一个标签

怎样标明<input>是交给第一个插槽呢,<input >标签内指定slot="checkAll"

显示结果

把所有相关的东西都定义到了父组件

页面显示

原文地址：https://www.cnblogs.com/curedfisher/p/12065801.html

时间： 2024-11-05 22:57:45

(尚033)Vue_案例_slot(组件间的通信4:slot)的相关文章

第四节：Vue表单标签和组件的基本用法，父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

本文介绍使用发布订阅的方式进行vue组件间的通信我认为这种方式比较自由, 不存在组件间的关系问题 1. 首先安装pubsub-js npm install --save pubsub-js 2. 订阅方组件 import PubSub from 'pubsub-js' mounted(){ // 执行异常代码 // 订阅消息 PubSub.subscribe('deleteTodo',(msg,index)=>{ this.deleteTodo(index) // 调用deleteTodo方法

原创-angularjs2不同组件间的通信

AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值 /** *1.定义一个服务,作为传递参数的媒介 */ @Injectable() export class PrepService{ //定义一个属性,作为组件之间的传递参数,也可以是一个对象或方法 profileInfo: any; } /** *2.传递参数的组件,我这边简单演示,直接就在构

Intent对象（组件间的通信原理）

Intent对象是一种可以在运行时动态绑定组件的关键技术,通过使用Intent对象,可以告诉系统你想要实现什么样的操作,也就是Intent对象里面包含的请求内容,请求再由Android操作系统接收到,然后到IntentFilter过滤器中找到已经注册的组件,再调用这个组件就完成了组件间通信的过程. Intent对象描述的基本内容:1.componentName组件的名称: 2.Action动作名称: 3.Data数据: 4.Category类别: 5.Extra附加数据: 6.Flag标志位

vue--综合组件间的通信

二.综合组件之间的通信实现一个ToDoList. ①完成所有的组件的创建和使用 ②add点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist) 核心代码:兄弟组件间通信步骤1:var bus = new Vue() 步骤2:在准备接受数据的组件 bus.$on('addEvent',function(){ }) 步骤3:触发事件 bus.$emit('addEvent',123) 将todolist中数组的元素渲染在todoitem的每一个span标签.(父

vue不同组件间的通信

不同组件间通信可以通过新建一个对象充当通信对象来实现. 1.新建一个对象A 2.在组件B中引入A对象, A.$emit('addShopCart',5); 5是传给回调函数的参数. 3.在组件C中引入A对象,A.$on('addShopCart',function(num){....}) B组件中发出一个名叫addShopCart的包裹,包裹里装着机密数字5,C组件说出了包裹名'addShopCart',所以拿到了包裹,并且可以对数字五进行进一步的处理. 具体代码如下 1.新建一个名为conn

vue 组件间的通信

(1)props:用于父组件向子组件传递消息使用方法: 在父组件中,使用子组件时,<Child v-bind:data="data"/>,通过v-bind把子组件需要的数据传递给子组件: 在子组件中通过props来接受传过来的数据,常用写法:props:['data',......]/props:{data:dataType,.....} 举例: (2)自定义事件:用于子组件向父组件传递消息使用方法: 在父组件中,对子组件的标签绑定一个自定义的事件监听,<Chil

(尚025)Vue_案例_静态组件

页面效果展示截图: 第一步.首先拆分组件 (1).首先看一下是上下/左右结构确定为:输入框+列表+底部; (2).确定名字 (3).创建对应的组件 =================================================================== 第二步:静态组件(拆分页面+拆分样式) 1.拆分页面 (1). (2). (3).拆分成功后,需要在App.vue中引入这3个组件写成标签 2.拆分样式 (1).在src下新建样式base.css 将index.c

(尚029)Vue_案例_交互footer组件功能

需要实现界面截图: 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交互("删除已完成任务":接收一个函数) 3.在App.vue中改标签传:todos和两个函数 4.在methods中定义两个函数 //删除全部已完成任务,要不要参数?怎样判断? //判断做这个事情有没有条件,假如我不传参数,能不能搞定 //说白了 {title:'吃饭',complete:false}{title:'睡觉',compl