vue_组件间通信:自定义事件、消息发布与订阅、槽
自定义事件
只能用于 子组件 向 父组件 发送数据
可以取代函数类型的 props
在父组件: 给子组件@add-todo-event="addTodo"
在子组件: 相关方法中,this.$emit("add-todo-event", newTodo);
pubsub 消息发布/订阅
实现任意关系的组件间通信
yarn add pubsub-js
实例:
- 子组件发布消息: 要求删除 todo
methods: {
PubSub.publish("deleteTodo", this.index);
}
- 父组件订阅消息: 执行回调,删除 todo
mounted: {
PubSub.subscribe("deleteTodo",(messageName, todosIndex)=>{
this.deleteTodo(todosIndex);
});
}
插槽内容 slot
父组件 向 子组件传递"标签数据"
应对: 不仅数据是动态的,结构也是动态的
App.vue 父组件 使用子组件时,声明用哪些槽:
<Child>
</Child>
子组件Child 定义槽:
<template>
</template>
插槽显示的顺序,由子组件编码决定
细节: 在写公共组件 Child 时,先不写槽,直接写正常的代码,将样式搞定,再抽出槽
vue_组件间通信:自定义事件、消息发布与订阅、槽的更多相关文章
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- vue组件间通信子与父
二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
随机推荐
- Teamviewer远程ssh命令行更改密码启动
Teamviewer远程ssh命令行更改密码启动 设置密码 $ sudo teamviewer passwd [NewPasswd ] 查看teamviewer信息 $ teamviewer info ...
- Linux之搭建远程数据库[Ubuntu:全过程]
1.mariadb在Linux中首次进入mysql (因为此时还没有创建任何用户,mysql的root并不等效于linux中的root用户) sudo apt-get install mysql-se ...
- 函数语法:JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转载)
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- I. Max answer(RMQ预处理前缀和)
题目链接: https://nanti.jisuanke.com/t/38228 题目大意:给你n个数,让你找出一个区间中f的最大值,具体的f计算方法,这段区间的和乘以这段区间的最小值. 具体思路:我 ...
- python 模块 DButils
# DButils 为了解决多客户端都需要操作数据库的问题. # import pymysql # from DBUtils.PooledDB import PooledDB # # POOL = P ...
- Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值
参考链接:https://blog.csdn.net/lander_xiong/article/details/79018737
- python 三大框架之一Django入门
Django 是从真实世界的应用中成长起来的,它是由 堪萨斯(Kansas)州 Lawrence 城中的一个 网络开发小组编写的. 它诞生于 2003 年秋天,那时 Lawrence Journal- ...
- mongoose 连接数据库操作
连接数据库 var mongoose = require('mongoose'); var schema = mongoose.Schema; // 连接MongoDB mongoose.connec ...
- Ubuntu18.04更换官方默认更新源sources.list
⒈备份官方默认更新源文件 cp /etc/apt/sources.list /etc/apt/sources.list.bak 备份官方更新源文件 ⒉编辑 1.打开 vi /etc/apt/sourc ...
- aiohttp使用队列
获取百度的搜索结果,然后把百度的长链接,获取到真实的url import time import aiofiles import aiohttp import asyncio from lxml im ...