vue的组件传输

vue的组件传输有四种,我个人觉得pubsub(订阅/发布)是最好用的,因为他不用去考虑关系,所以我们下面就只讲解pubsub吧

1) 优点: 此方式可实现任意关系组件间通信(数据)

 

首先我们需要安装下pubsub-js库

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("搜不到呢!换个关键词")
})
})