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. Kubernetes 集群部署(1) -- 自签 TLS 证书

    集群功能各模块功能描述: Master节点:主要由四个模块组成,APIServer,schedule, controller-manager, etcd APIServer: APIServer负责对 ...

  2. [USACO08OPEN]农场周围的道路Roads Around The Farm BZOJ 1621 DFS

    Farmer John's cows have taken an interest in exploring the territory around the farm. Initially, all ...

  3. 牛客寒假算法基础集训营4 B applese 走方格

    链接:https://ac.nowcoder.com/acm/contest/330/B 构造题,但是有两个特判... 1  2 2  1 然后就水了,血亏 #include<stdio.h&g ...

  4. 分析mybatis和jdbc的作用,已经原理

    从jdbc的操作数据库来看:主要分为几步: 1 注冊载入JDBC驱动程序: 2 得到连接对象 Connection 3 创建 Statement对象 4 运行sql语句 5 处理结果 6 关闭资源释放 ...

  5. (转)TestNG框架提供两种传入参数的方法:

    1.从testng.xml传入参数. 如果参数是一些简单的值,可以直接在testng.xml中定义.这也是最常用的一种. 可以在测试用例中给参数一个默认值.这样,即使在xml文件中没有这个变量,你的测 ...

  6. C3算法之我见

    C3算法说到底就是merge算法,看了一些帖子,总结说得莫名其妙,大家也是抄来抄去,我试着用自己的话来把这个东西怎么操作的说清楚.当然了我也要抄一些别人的,但是我会 尽量把我认为别人没有讲清楚的那一部 ...

  7. redis数据库介绍(NoSql数据库)

  8. 你不得不知道的5个神奇的Docker工具

    Docker社区非常活跃,每天都会推出大量有用的工具.要想持续追踪社区中发生的各项创新其实非常困难.为了帮助你,我收集了一些每天在日常工作中使用.令人感兴趣并且十分有用的Docker工具.这些工具消除 ...

  9. ymPrompt.js消息提示组件

    转载:https://www.cnblogs.com/linzheng/archive/2010/11/15/1878058.html 使用说明: 1.在页面中引入ymPrompt.js.如:< ...

  10. testlink数据库访问密码修改

    testlink重启后数据库连接不上将会报错 错误:1045 - Access denied for user 'my_db '@'localhost' (using password: YES) 怎 ...