自定义事件

只能用于 子组件 向 父组件 发送数据

可以取代函数类型的 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_组件间通信:自定义事件、消息发布与订阅、槽的更多相关文章

  1. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  2. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  3. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  4. 【Vue】利用父子组件间通信实现一个场景

    组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...

  5. [转] React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...

  6. Vue组件间通信6种方式

    摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...

  7. vue组件间通信子与父

    二.组件间通信(子组件传值给父组件) 通过事件的方式来完成数据的传输. ①在父组件中 定义一个方法,用来接收子组件所通过事件传来的值 methods:{ recvMsg:function(msg){ ...

  8. React中组件间通信的方式

    React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...

  9. 聊聊Vue.js组件间通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

随机推荐

  1. Teamviewer远程ssh命令行更改密码启动

    Teamviewer远程ssh命令行更改密码启动 设置密码 $ sudo teamviewer passwd [NewPasswd ] 查看teamviewer信息 $ teamviewer info ...

  2. Linux之搭建远程数据库[Ubuntu:全过程]

    1.mariadb在Linux中首次进入mysql (因为此时还没有创建任何用户,mysql的root并不等效于linux中的root用户) sudo apt-get install mysql-se ...

  3. 函数语法:JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转载)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  4. I. Max answer(RMQ预处理前缀和)

    题目链接: https://nanti.jisuanke.com/t/38228 题目大意:给你n个数,让你找出一个区间中f的最大值,具体的f计算方法,这段区间的和乘以这段区间的最小值. 具体思路:我 ...

  5. python 模块 DButils

    # DButils 为了解决多客户端都需要操作数据库的问题. # import pymysql # from DBUtils.PooledDB import PooledDB # # POOL = P ...

  6. Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

    参考链接:https://blog.csdn.net/lander_xiong/article/details/79018737

  7. python 三大框架之一Django入门

    Django 是从真实世界的应用中成长起来的,它是由 堪萨斯(Kansas)州 Lawrence 城中的一个 网络开发小组编写的. 它诞生于 2003 年秋天,那时 Lawrence Journal- ...

  8. mongoose 连接数据库操作

    连接数据库 var mongoose = require('mongoose'); var schema = mongoose.Schema; // 连接MongoDB mongoose.connec ...

  9. Ubuntu18.04更换官方默认更新源sources.list

    ⒈备份官方默认更新源文件 cp /etc/apt/sources.list /etc/apt/sources.list.bak 备份官方更新源文件 ⒉编辑 1.打开 vi /etc/apt/sourc ...

  10. aiohttp使用队列

    获取百度的搜索结果,然后把百度的长链接,获取到真实的url import time import aiofiles import aiohttp import asyncio from lxml im ...