vue的组件传输有四种,我个人觉得pubsub(订阅/发布)是最好用的,因为他不用去考虑关系,所以我们下面就只讲解pubsub吧
1) 优点: 此方式可实现任意关系组件间通信(数据)
 
首先我们需要安装下pubsub-js库
aaarticlea/png;base64,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" alt="" />
npm install --save pubsub-js
 
我个人觉得这个是组件传输用pubsub比较好理解,又方便,有点想微信公众号
 
我们需要先订阅消息,一般都会在mounted()方法中订阅,因为该方法会在页面加载时执行一次
 
订阅消息:
PubSub.subscribe('msg', function(msg, data){})
 
接下来我们需要发布消息,在哪里需要的地方发布消息,订阅消息一匹配到就会自动执行我们上面订阅消息中的方法中去
 
发布消息:
PubSub.publish('msg', data)
 
下面是一个小案例
methods:{
search(){
const searchName = this.SearchName.trim()
if(searchName){
//发布消息
PubSub.publish("search",searchName)
}else{
alert("请输入关键字")
}
}
} mounted() {//初始化执行
//订阅消息
PubSub.subscribe("search",(msg,SearchName)=>{
//修改状态
this.firstView=false
this.loding=true
this.users=[]
this.msg=""
const url = `https://api.github.com/search/users?q=${SearchName}`
//进行ajax请求
Axios.get(url).then(response=>{
this.loding=false
//请求成功
const users = response.data.items.map(item=>({
username:item.login,
avatarUrl:item.avatar_url,
url:item.html_url
}))
this.users = users
}).catch(error=>{
alert("搜不到呢!换个关键词")
})
})

vue的组件传输的更多相关文章

  1. Vue自定义组件以及组件通信的几种方式

    本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...

  2. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  3. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  4. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  5. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  6. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  7. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  8. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  9. vue的组件和生命周期

    Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...

随机推荐

  1. form表单操作

    Django之Form组件 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 简单例子  For ...

  2. sort排序bug乱序

    项目需要对组件的zIndex值进行降序排列,刚开始采用的是sort进行排序,排完之后感觉没问题,毕竟也是经常用的,可是昨天无意中把zIndex值打出来看,一看不知道,发现只要排序的组件超过10个就出问 ...

  3. loj #2023. 「AHOI / HNOI2017」抛硬币

    #2023. 「AHOI / HNOI2017」抛硬币   题目描述 小 A 和小 B 是一对好朋友,他们经常一起愉快的玩耍.最近小 B 沉迷于**师手游,天天刷本,根本无心搞学习.但是已经入坑了几个 ...

  4. CF1093E Intersection of Permutations 树状数组套权值线段树

    \(\color{#0066ff}{ 题目描述 }\) 给定整数 \(n\) 和两个 \(1,\dots,n\) 的排列 \(a,b\). \(m\) 个操作,操作有两种: \(1\ l_a\ r_a ...

  5. luogu2522 [HAOI2011]Problem b

    luogu2522[HAOI2011]Problem b 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公 ...

  6. Swift 4.0 正式发布,更快更兼容更好用

    Swift4现已正式发布!Swift4在Swift3的基础上,提供了更强大的稳健性和稳定性,为Swift3提供源码兼容性,对标准库进行改进,并添加了归档和序列化等功能. 你可以通过观看WWDC2017 ...

  7. iOS 11导航栏设置BarButtonItem变形问题和错位问题

    升级到 iOS 11,你可能会发现你的 App 的工具栏的行为出了点异常.比如奇点,我在使用过程中,发现工具栏时灵时不灵,感觉很难点到.这是怎么回事?通过 Xcode 的 Debug View Hie ...

  8. Django---队列

    1.队列介绍 任务队列用作跨线程或机器分配工作的机制. 任务队列的输入是称为任务的工作单元. 专用工作进程不断监视任务队列以执行新工作. Celery通过消息进行通信,通常使用经纪人(brokers) ...

  9. 解决dubbo注册zookepper服务IP乱入问题的三种方式

    最近做一个项目引入了dubbo+zookepper的分布式服务治理框架.在应用的发布的时候出现一个怪问题.zookepper服务是起在开发服务器192.168.23.180上.本机起应用服务提供者注册 ...

  10. pytorch构建优化器

    这是莫凡python学习笔记. 1.构造数据,可以可视化看看数据样子 import torch import torch.utils.data as Data import torch.nn.func ...