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自定义组件以及组件通信的几种方式
本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
随机推荐
- AtCoder Grand Contest 011D(思维,规律,异或)
#include<bits/stdc++.h>using namespace std;char s[200007];int ans[200007];int main(){ int n ...
- I - 一次元リバーシ / 1D Reversi(水题)
Problem Statement Two foxes Jiro and Saburo are playing a game called 1D Reversi. This game is playe ...
- 简单配置webpack4 + vue
1.创建webpack4-vue文件夹 mkdir webpack4-vue && cd webpack4-vue 2.初始化npm npm init -y 3.安装相关依赖 npm ...
- java volatile 关键字(转)
volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果.在Java 5之后,volatile关键字才得以 ...
- oracle多用户并发及事务处理
多用户并发访问 事务:作用于某些数据的一个不可分割的操作 锁:写锁.互斥锁(仅能被一个进程使用) 读锁.共享锁(可被多个进程使用) 更新丢失 脏读 不可重复读 幻影读 隔离级别: ...
- c# 中virtual与abstract
在C#的学习中,容易混淆virtual方法和abstract方法的使用,现在来讨论一下二者的区别.二者都牵涉到在派生类中与override的配合使用. 一.Virtual方法(虚方法) virtual ...
- 老男孩python作业9-简单的商城页面布局
利用HTML相关知识编写下面的网页: 核心代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...
- Github常见命令整理
常见命令: 将文件增加到index/stage暂存区: git add filename 将暂存的文件更新到本地库中:git commit -m "备注内容" 将本地库更新到远程库 ...
- tfs强行签入和删除工作区
作者:为爱痴狂 原文:http://www.cnblogs.com/splyn/archive/2011/10/31/2230213.html 域用户被网络管理员重建,或者其他用户牵出文档,导致的TF ...
- poj3040 发工资(贪心)
题目传送门 题目大意:给一个人发工资,给出不同数量不同面额,(大面额一定是小面额的倍数),问最多能发几天,(每天实发工资>=应发工资). 思路:首先,将大于等于c的面额的钱直接每个星期给奶牛一张 ...